javascript - 如何在组件内使用 React 自定义环境变量

Question

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

1 - 开发

2 - 分期

3 - 生产

我关注这个article来自 Facebook 。因此，基于这篇文章，现在我的项目中有 3 个 .env 文件:

.env.development

.env.staging

.env.production 

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

API_URL=https://MYAPI.com/STAGE

在我的 package.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 run build_staging

它将构建应用程序，但一旦我调试它，apiUrl 始终是未定义。

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

Answer 1

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