使用 .env 和 create-react-app 加载不同的环境变量

Question

我需要为每个开发/生产服务器加载不同的.env文件。

Dev/Prod Server     | .env file
---------------------------------------------
localhost           | .env.development.local
development         | .env.development
qa                  | .env.qa
production          | .env.production

所以，我尝试以这种方式编辑package.json文件。

"start-js": "react-scripts start .env.development.local",
"start": " npm-run-all -p watch-css start-js",
"build:dev": "npm run build-css && react-scripts build .env.development",
"build:qa": "npm run build-css && react-scripts build .env.qa",
"build:pro": "npm run build-css && react-scripts build .env.production"

但是如果我执行build:*命令，加载的文件始终是.env.production，因为NODE_ENV是生产环境。是否可能使用"build:*命令加载其他.env文件？

- Webman

---

尝试看一下dotenv。你可以使用它加载不同的环境变量文件。 - Rei Dien

@ReiDien，使用dotenv，build:qa的脚本应该是什么？ npm run build-css && react-scripts dotenv_config_path=qa.env 不识别 dotenv_config_path。 - Webman

Answer 1

我使用react-app-env和重命名.env文件解决了我的问题。

Dev/Prod Server     | .env file
---------------------------------------------
qa                  | qa.env

例如，build:qa 脚本变成了：

"build": "npm run build-css && react-scripts build",
"build:qa": "react-app-env --env-file=qa.env build"

- Webman

Answer 2

我是switchenv的作者。它是一个命令行工具，可以快速从Keepass条目（Notes字段中的内容）切换.env文件。

只需运行yarn switchenv development即可替换您的.env文件。

运行yarn switchenv production并用生产环境的文件替换您的.env文件。

基本上，所有的.env文件都存储在Keepass文件的条目中。每个条目的.env文件内容应存储在Note字段中。使用switchenv读取该Keepass文件并用条目的Notes替换.env文件。

- Christiaan Westerbeek