如何为react应用程序设置env变量?

Question

我的react应用程序运行在http://localhost:3000上，我想为不同的环境开发，生产，登台和本地设置env变量。

我的react应用程序的url不同的环境是(我嘲笑我的url)

local = http://localhost:3000
development = http://react.developmet.com
production = http://react.production.com
stage = http://react.stage.com

寻找解决方案，如何为不同的环境设置env变量。

把我的方法加到同样的事情上，只是想知道这个方法是好还是不好。

以及如何在登台环境

中实现相同的功能我已经创建了一个environment.js文件。

let BASE_URL = http://localhost:3000
//check for environment
if (process.env.REACT_APP_ENV = "development") {
BASE_URL = "http://react.developmet.com"
}
if (process.env.REACT_APP_ENV = "production") {
BASE_URL = "http://react.production.com"
}
export {BASE_URL}

，也更新了我的运行脚本

"scripts": {
"dev":"REACT_APP_ENV=development npm start",
"prod":"REACT_APP_ENV=productionnpm start",
"build:dev":"REACT_APP_ENV=development npm run-script build",
"build:prod":"REACT_APP_ENV=production npm run-script build",
}

Answer 1

您可以使用env-cmd来管理多个env文件的构建:

安装

:

yarn add env-cmd -D

创建env文件

1. 在根项目级别创建文件夹envs
2. 创建.env文件(根据需要创建)

。envs/.env.dev,envs/.env.prod,envs/.env.staging等

.env样例(例如envs/.env.prod)文件

REACT_APP_API_HOST=http://my-prod-api.example.com
REACT_APP_ANY_OTHER_VAR=some_value

配置包中的脚本。json文件:

"scripts": {
"start": "react-scripts start",
"eject": "react-scripts eject",
"dev": "env-cmd -f envs/.env.dev react-scripts build",
"prod": "env-cmd -f envs/.env.prod react-scripts build",
"staging": "env-cmd -f envs/.env.staging react-scripts build",
},

构建:

$ yarn dev // to make build for dev env
$ yarn prod // to make build for prod env
$ yarn staging // to make build for staging env

PS:您也可以使用npm命令。我只使用yarn作为示例。