在实际项目开发中&＃xff0c;前端会面对多个环境的接口&＃xff1a;开发环境、测试环境、生产环境&＃xff0c;所以项目中网络请求的 baseUrl 也需要跟随这些环境来变化。

我们一般会使用像 create-react-app 脚手架来做项目的初始化

create-react-app 配置多环境接口&＃xff0c;官方文档 默认是支持多个环境配置文件的&＃xff1a;.

例如&＃xff0c;只有线上和测试环境两种接口&＃xff0c;

官方文档也给了我们答案&＃xff0c;可以使用 dotenv 来做环境变量的管理

&＃xff08;dotenv 可将环境变量从 .env 文件加载到 process.env中。&＃xff09;

npm install dotenv-cli --save-dev

写好各个环境的配置文件

.env.test

# env.development and test
REACT_APP_BASE_URL&＃61;&＃39;http://test.xxx.xxx&＃39;

.env.live

# env.production
REACT_APP_BASE_URL&＃61;&＃39;http://live.xxx.xxx&＃39;

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

"scripts": {"start": "react-scripts start","test": "react-scripts test","eject": "react-scripts eject","build": "react-scripts build","build:test": "dotenv -e .env.test react-scripts build","build:live": "dotenv -e .env.live react-scripts build"},

当我需要在打包前端代码时&＃xff0c;我就可以执行npm run build:test来指定使用 .env.test中的环境变量了&＃xff5e;