React多环境配置

通常项目开发的时候，开发环境与生成环境的请求地址是不一致的，有时候本地测试可能会用到多个环境以便查看信息，因而我们的BASE_URL就不能写死，需要根据当前定义的变量来获取正确的地址。

官网提示

注意：你必须以 REACT_APP_ 开头创建自定义环境变量。除了 NODE_ENV 之外的任何其他变量都将被忽略，以避免意外地在可能具有相同名称的计算机上公开私钥。更改任何环境变量都需要重新启动正在运行的开发服务器。

dotenv

• 安装工具dotenv-cli
• 在根目录下新建文件

// .env.development 开发的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=development

// .env.test 测试的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=test

// .env.production 生产的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=production

有关更多详细信息，请参阅dotenv 文档

• 修改package.json中的scripts指定环境

"build:dev": "dotenv -e .env.development react-app-rewired build",
"build:pro": "dotenv -e .env.production react-app-rewired build",

• 使用

1. html中：%REACT_APP_ENV%
2. js/jsx中：可以在process.env中访问

cross-env

cross-env设计是为了定义全平台兼容的环境变量命令

• 安装 cross-env

npm install cross-env -D
或
yarn add cross-env -D

• package.json 的 scripts 里面添加代码

"start:dev": "cross-env REACT_APP_ENV=development react-app-rewired start",
"start:test": "cross-env REACT_APP_ENV=test react-app-rewired start",
"start:prod": "cross-env REACT_APP_ENV=production react-app-rewired start",

通过使用REACT_APP_ENV就可以获取到不同环境的变量，根据此变量就可以设置不同环境的地址。

参考地址：添加自定义环境变量