Невозможно получить URL .env для моего компонента в моем реактивном проекте.

Question

Я использую 3 .env файла, такие как .env.prod, .env.dev и .env. Но не удалось получить URL для моего компонента.

Я использую реагирование 16,9.

Не могли бы вы мне помочь, почему я не могу его достать?

в моих файлах .env / .env.dev

loginUrl = = "http://localhost:8080/api/2.0/admin/auth/login"

в моих файлах package.json

 "scripts": {
    "start": "cp ./.env.dev .env && react-scripts start",
    "build:dev": "cp ./.env.dev .env && react-scripts build",
    "build:stage": "cp ./.env.stage .env && react-scripts build",
    "build:prod": "cp ./.env.prod .env && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },```

Inside my component, when I am printing it it is giving undefined.

console.log(process.env.loginUrl) is giving undefined

Answer 1

Использование Сценарий реакции

Глядя на документацию Реагирование сценария добавления пользовательских окружений , переменные автоматически загружаются из .env, если:

Примечание: вы должны создать пользовательские переменные среды, начинающиеся с REACT_APP_. Любые другие переменные, кроме NODE_ENV, будут игнорироваться, чтобы избежать случайного раскрытия секретного ключа на компьютере, который может иметь то же имя. Изменение любых переменных среды потребует перезапуска сервера разработки, если он работает.

Похоже, что проблема связана с именем вашей переменной, попробуйте переименовать в REACT_APP_LOGIN_URL

Примечание: эта функция доступна с response-scripts@0.5.0 и выше.

Если вместо Web-скрипта используется Webpack

Вывам нужно использовать webpack DefinePlugin для добавления переменных окружения в ваш код.

В вашем файле webpack.config.js:

require("dotenv").config(); // will load .env file in process.env
const webpack = require("webpack");
...

plugins: [
    ...
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production"),
        SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN),
        BUILD_DATE: JSON.stringify(new Date()),
        TRAVIS_COMMIT: JSON.stringify(process.env.TRAVIS_COMMIT)
      }
    }),
   ...
]

Убедитесь, что у вас есть только строки, как если бызначение не является строкой, оно будет строковым (включая функции).

Затем в своем коде вы можете вызвать console.log(process.env.NODE_ENV)