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

Question

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

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

NODE_ENV=production webpack

console.log(process.env)

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

.env file

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

.env.prod file

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?

Answer 1

вы можете использовать плагин 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, делающий подобную вещь в здесь