0
点赞
收藏
分享

微信扫一扫

React 分别打包测试、生产环境的配置

江南北 2022-01-31 阅读 75

ac25a8c099b7e7bbe9f02fc0c6ea210b.png

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

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

create-react-app 配置多环境接口,官方文档 默认是支持多个环境配置文件的:.


例如,只有线上和测试环境两种接口,

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

(dotenv 可将环境变量从 .env 文件加载到 process.env中。)

npm install dotenv-cli

写好各个环境的配置文件

.env.test

# env.development and test
REACT_APP_BASE_URL='http://test.xxx.xxx'

.env.live

# env.production
REACT_APP_BASE_URL='http://live.xxx.xxx'

修改 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-app-rewired build",
    "build:live": "dotenv -e .env.live react-app-rewired build"
  },

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

举报

相关推荐

0 条评论