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

Posted 2023-02-22

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

【英文标题】：How to read different .env files depending on production or development mode?

【发布时间】：2018-11-12 07:50:29

【问题描述】：

我正在使用 Vue 和 webpack，并带有一个环境变量，告诉 webpack 为生产或开发而构建。

这是有效的：

NODE_ENV=production webpack

console.log(process.env)

但是，this documentation explains 您可以根据生产或开发模式使用不同的.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)

在没有vue-cli 的情况下，如何根据生产模式访问不同的.env 文件？

【问题讨论】：

作为替代方案，您可以使用switchenv。它是用于从 Keepass 条目（来自 Notes 字段的内容）快速切换 .env 文件的命令行实用程序。我是作者。

您可以使用github.com/hk-labs/dotenv-flow-webpack，它可以满足您的需求。

仅供参考，dotenv explicitly discourage 的创建者创建了多个 .env 文件，每个文件都用于自己的环境

好的，但是如何根据模式更改变量？

【参考方案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"`,
    )
  ]
  ...
;

你可以在repo看到 vue-cli 做类似的事情

【讨论】：

谢谢，这会加载.env 文件！但现在我被困在如何加载.env.prod 文件上？似乎 webpack 总是加载 .env，即使在生产模式下也是如此。

谢谢！只是在这里修复一个小错字 => 路径：./.env.$env === "production" ? "prd" : "dev",