前端配置多环境打包

转载自：https://segmentfault.com/a/1190000018072031

UMI 框架封装的很好，查了很多解决方案，亲测这个方法有效，也是最简单的。

1. 安装 corss-env

UMI 2.0 以上版本应该是默认安装好的，只是没有使用，所以安装之前可以检查下 package.json 文件，如有，可忽略此步骤。

npm install --save-dev cross-env

2. 在 config/config.js 文件里配置开发环境的 apiUrl

 define: {
    "process.env.apiUrl":'https://www.dev.com/'
  },

3. 复制两次 config/config.js，并更改文件名为 config/config.test.js 和 config/config.prod.js，分别配置 apiUrl

// config.test.js
 define: {
    "process.env.apiUrl":'https://www.test.com/'
  },

// config.prod.js
 define: {
    "process.env.apiUrl":'https://www.prod.com/'
  },

4. 在其他文件可以获取 process.env.apiUrl 作为url前缀，如封装 axios 的 request.js

// request.js
console.log(process.env.apiUrl);

5. 在 package.json 的 scripts 处配置打包命令

"build-dev": "cross-env UMI_ENV=dev umi dev",
"build-test": "cross-env UMI_ENV=test umi build",
"build-prod": "cross-env UMI_ENV=prod umi build",