create-react-app 区分环境环境变量

config.js

const baseURL = {
  // 使用反向代理解决跨域时，dev应为空字符串
  dev: '',
  test: 'http://abc.cn',
  // 使用yarn build打包，所有接口使用这个url，需要服务器解决跨域
  prod: 'http://abc.cn'
}[process.env.REACT_APP_MODE]

const imageBaseUrl = {
  dev: 'http://abc.cn/',
  test: 'http://abc.work/',
  prod: 'http://abc.cn/',
}[process.env.REACT_APP_MODE]

const nodeBaseURL = {
  dev: '',
  test: 'https://efficacious-tiny-infinity.glitch.me',
  prod: 'https://efficacious-tiny-infinity.glitch.me',
}[process.env.REACT_APP_MODE]

export { baseURL, imageBaseUrl, nodeBaseURL }

.env:

// .env
NODE_ENV=development
REACT_APP_MODE=dev

.env.prod:

// .env.prod
NODE_ENV=production
REACT_APP_MODE=prod
BUILD_PATH= /zlhx-ui

.env.test:

// .env.test
NODE_ENV=production
REACT_APP_MODE=test

package.json:

  "scripts": {
    "start": "node scripts/start.js",
    "build_test": "cross-env MODE_ENV=test GENERATE_SOURCEMAP=false GENERATE_BUNDLE_ANALYZER_REPORT=true node scripts/build.js",
    "build": "cross-env MODE_ENV=prod GENERATE_SOURCEMAP=false node scripts/build.js",
    "test": "node scripts/test.js"
  },

修改config/env.js文件:

// const NODE_ENV = process.env.NODE_ENV;
const NODE_ENV = process.env.MODE_ENV || process.env.NODE_ENV;

create-react-app 区分环境环境变量

可以通过修改环境变量配置，控制打包输出目录：

create-react-app 区分环境环境变量