Reactjs：使用 react build 在 build 文件夹中设置具有 3 个变量（prod、dev、staging）的 .env 文件答案

【问题标题】：Reactjs : set .env file with 3 variables(prod,dev,staging) in the build folder with react buildReactjs：使用 react build 在 build 文件夹中设置具有 3 个变量（prod、dev、staging）的 .env 文件
【发布时间】：2020-07-20 12:00:54
【问题描述】：

我有一个带有 build 文件夹的 react 应用程序（由 npm run build 生成），我想在我的 .env 文件中有 3 个变量（只有一个文件）：

REACT_APP_API_URL=http://localhost:3000/api ( for production)
REACT_APP_PROD_URL=http://localhost:3001/api ( for staging)
REACT_APP_STAGIN_URL=http://localhost:3002/api ( for development)

并在 npm run build 文件夹中使用它们

【问题讨论】：

标签： node.js reactjs environment-variables dotenv

【解决方案1】：

创建差异 env 文件
安装yarn add env-cmd
并将脚本添加到package.json:

"start-qa": "env-cmd -f .env.qa react-scripts start"

或构建：

"build-qa": "env-cmd -f .env.qa react-scripts build"

【讨论】：

【解决方案2】：

试试cross-env

你的 package.json 中有这样的东西

"start":  cross-env REACT_APP_API_URL=http://localhost:3000/api node scripts/start.js

也许它会帮助你实现你的目标

【讨论】：

【解决方案3】：

您需要为每个环境创建一个单独的 .env 文件。

如CRA Documentation: What other .env files can be used?中所说：

.env.development、.env.test、.env.production：环境特定设置。

您不能将所有环境变量放在一个文件中，这些值将被覆盖。更多信息请查看dotenv documentation

或者如果您想在构建项目后编辑环境变量，请参考：https://stackoverflow.com/a/56120507/5078746

【讨论】：

我不能有 3 个变量，每个变量都有自己的名字？我测试 node_env==prod 我是否调用了生产 url .. ?
您不能在同一个文件中执行此操作，它将被覆盖，因为它将采用该变量的最后一个值。您要么通过拥有多个 .env 文件来寻求建议的解决方案，要么创建一个文件来读取变量并应用逻辑 (node_env==prod...)