如何在组件中使用 React 自定义环境变量

Question

我使用 Create-React-App 创建了一个 react 应用程序，现在我想有 3 个不同的环境变量用于构建：

1 - 发展

2 - 分期

3 - 生产

我关注Facebook的这篇文章。所以基于这个艺术，现在我的项目中有 3 个 .env 文件：

.env.development
.env.staging
.env.production 

在每个 .env 文件中，我都有基于我们构建应用程序的阶段的 API 地址，如下所示：

API_URL=https://MYAPI.com/STAGE

在我的包.json中，我有这些脚本：

"scripts": {
"start": "env-cmd .env.development react-scripts start",
"build_development": "env-cmd .env.development npm run build",
"build_staging": "env-cmd .env.staging npm run build",
"build": "react-scripts build",
}

在调用此 api URL 的组件中，我使用它来获取API_URL：

let apiUrl = process.env.API_URL

所以一旦我运行例如：npm 运行build_staging

它将构建应用程序，但是一旦我调试它，apiUrl总是undefined。

不知道出了什么问题？有人有这样的问题吗？

Answer 1

我相信您的环境变量名称需要使用create-react-app以REACT_APP_开头，如您链接的同一GitHub页面中所述。将API_URL更改为REACT_APP_API_URL应该可以解决此问题。