如何在使用 create-react-app 创建的应用程序中设置环境变量？答案

【问题标题】：How to set environment variables in app created with create-react-app?如何在使用 create-react-app 创建的应用程序中设置环境变量？
【发布时间】：2020-03-20 20:11:57
【问题描述】：

我用create-react-app 创建了一个应用程序，我想在 JS 文件中配置一些环境。如果我希望在服务器初始化后立即执行这些文件，我应该把它们放在哪里？

我尝试将index.js 添加到根文件夹并创建server/config.js 文件，但这不起作用。

【问题讨论】：

标签： node.js reactjs create-react-app

【解决方案1】：

如果您在这里的目的是检查前端的应用程序环境，则无需设置任何 .env 文件，您可以在运行 package.json 文件中所需的脚本之前设置全局变量：

"scripts": {
   "start": "REACT_APP_ENVIRONMENT=LOCAL react-scripts start"
   "build": "REACT_APP_ENVIRONMENT=PRODUCTION react-scripts build"
}

因此，无论何时您想在本地环境中工作，都将运行 npm start，这会将 REACT_APP_ENVIRONMENT 变量设置为 LOCAL 值。

当你想在生产环境中运行应用程序时，同样的工作是运行 npm run build 脚本，这会将变量 REACT_APP_ENVIRONMENT 设置为 PRODUCTION 值

您可以在 js 配置文件中使用相同的变量来获取当前环境：

export const isDevelopment = REACT_APP_ENVIRONMENT === 'LOCAL'; export const isProduction = REACT_APP_ENVIRONMENT === 'PRODUCTION';

【讨论】：

它给了我'REACT_APP_ENVIRONMENT' is not recognized as an internal or external command。我想知道为什么它对其他人有用

【解决方案2】：

在应用的根目录中创建一个 .env 文件。使用字符串 REACT_APP_varNameHere 为每个环境变量添加前缀。在此处查找示例：https://create-react-app.dev/docs/adding-custom-environment-variables/

【讨论】：

嗯，老实说，我真正的目的是为生产和开发环境设置不同的HTTP_PROXY 值。我想通过在 JS 中编写条件语句来做到这一点。我可以使用 .env 文件来实现吗？