如何根据生产或开发模式读取不同的 .env 文件？

Question

我正在使用 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?

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 在这个repo 中做了类似的事情