Как читать разные файлы .env в зависимости от режима производства или разработки?

Я использую Vue и webpack с переменной окружения, которая сообщает webpack о создании для производства или разработки.

Это работает:

NODE_ENV=production webpack

console.log(process.env)

Но в этой документации объясняется, что вы можете использовать разные .env файлы в зависимости от производственной или режим разработки, чтобы изменить переменные в вашем приложении.

Файл .env

VUE_APP_ROOT=http://localhost:8000/
VUE_APP_BASE_URL=http://localhost:8000/api/

Файл .env.prod

VUE_APP_ROOT=http://realaddress/
VUE_APP_BASE_URL=http://realaddress/api/

Но я не понимаю, как получить доступ к этим файлам .env? По-видимому, это работает, когда вы используете vue-cli, но в моем приложении этот журнал не определен:

console.log("environment variables")
console.log(process.env.VUE_APP_ROOT)
console.log(process.env.VUE_APP_BASE_URL)

Как я могу получить доступ к различным .env файлам в зависимости от рабочего режима без vue-cli?


webpack vue.js vue-cli
person Kokodoko    schedule 02.06.2018    source источник
comment
В качестве альтернативы вы можете использовать Switchenv. Это утилита командной строки для быстрого переключения файла .env из записей Keepass (содержимое из поля «Примечания»). Я автор.   -  person Christiaan Westerbeek    schedule 08.12.2018
comment
Вы можете использовать github.com/hk-labs/dotenv-flow-webpack , он делает именно то, что вам нужно.   -  person Dan K.K.    schedule 17.04.2019
comment
К вашему сведению, создатели dotenv явно не рекомендуют создавать несколько .env файлов, каждый для своей среды   -  person Dima Parzhitsky    schedule 31.10.2019
comment
Хорошо, а как же тогда менять переменные в зависимости от режима?   -  person Kokodoko    schedule 04.11.2019

Ответы (1)


arrow_upward
6
arrow_downward

вы можете использовать плагин dotenv.

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

Чтобы загрузить файл в зависимости от среды, вы можете использовать process.env.NODE_ENV:

// webpack.config.js
const Dotenv = require('dotenv-webpack');
const env = process.env.NODE_ENV;

module.exports = {
  ...
  plugins: [
    new Dotenv({
      path: `./.env.${env === "production" ? "prd" : "dev"}`,
    })
  ]
  ...
};

Вы можете увидеть, как vue-cli делает то же самое в этом репо

person loveky    schedule 02.06.2018
comment
Спасибо, файл .env загружается! Но теперь я застрял в том, как загрузить .env.prod файл? Кажется, что webpack всегда загружает .env, даже в производственном режиме. - person Kokodoko; 02.06.2018
comment
Спасибо ! Здесь нужно исправить небольшую опечатку = ›path: ./.env.${env === "production" ? "prd" : "dev"}, - person gwendall; 17.10.2018