react配置多环境打包

react中配置多环境打包

项目根目录创建.env对应环境变量文件

  // .env 文件
  REACT_APP_PROJECT_TYPE=dev
  所有环境生效

  // .env.test 文件
  REACT_APP_PROJECT_TYPE=test
  打包后的测试环境生效

  // .env.prod 文件
  REACT_APP_PROJECT_TYPE=prod
  打包后的生成环境环境生效

在package.json的script中配置build

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

如果没有安装dotenv，需要全局安装

  npm install -g dotenv

在项目中使用环境变量

  const projectType = process.env.REACT_APP_PROJECT_TYPE
  // 处理你的代码逻辑

打包

 // 测试环境打包
 npm run build:test

 // 正式环境打包
 npm run build:prod