通常项目开发的时候，开发环境与生成环境的请求地址是不一致的，有时候本地测试可能会用到多个环境以便查看信息，因而我们的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",
- 使用
- html中：
%REACT_APP_ENV% - 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就可以获取到不同环境的变量，根据此变量就可以设置不同环境的地址。
参考地址：添加自定义环境变量
网友评论