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

时间:2018-10-08 06:43:24

标签: javascript reactjs environment-variables

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

1-开发

2-分期

3-生产

我在Facebook上关注了此article。因此,基于这种弹头,现在我的项目中有3个.env文件:

RewriteRule ^(.*)$ https://www.drrashmisharma.com/$1 [R,L]

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

.env.development

.env.staging

.env.production 

在我的package.json中,我有以下脚本:

API_URL=https://MYAPI.com/STAGE

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

"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",
 }

例如,一旦我运行:npm运行build_staging

它将构建应用程序,但是一旦我对其进行调试,let apiUrl = process.env.API_URL 始终为apiUrl

不确定出什么问题了吗?有人遇到这样的问题吗?

1 个答案:

答案 0 :(得分:1)

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