如何在组件内部使用 React 自定义环境变量答案

【问题标题】：How to use React Customize Environment Variables inside component如何在组件内部使用 React 自定义环境变量
【发布时间】：2019-03-12 19:09:21
【问题描述】：

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

1 - 开发

2 - 分期

3 - 生产

我从 Facebook 关注 article。所以基于这篇文章，现在我的项目中有 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 始终是undefined。

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

【问题讨论】：

定义环境变量后是否重启了服务器？
@BhojendraRauniyar 重启服务器是什么意思？没有服务器，它只是一个客户端反应应用程序，我在终端中运行 npm run build_staging 以从头开始构建应用程序，但 apiUrl 始终未定义。

标签： javascript reactjs environment-variables

【解决方案1】：

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

【讨论】：