基于antd-pro框架，配置package.json中的打包命令，实现不同环境使用不同的接口apiUrl前缀，避免人肉修改，保证各环境对应各自的api地址。

背景

这阵子，在玩antd-pro，感觉整体框架基本是一套很完善的管理系统，因此也将该套框架运用到实际项目中，UI、组件啥的都没有问题，就是在打包部署的时候，本地开发、测试、线上接口api前缀不同，打包发布到测试环境和线上环境，需要人为的去修改config中的path配置，感觉多少有点不方便，而且也容易出现问题。鉴于这个背景，在闲暇之余，研究了一下umi中的参数配置，将这个风险性事件，一次性从源头解决。

解决思路

1. 结合目前的情况，我们现有三个环境，本地开发、测试环境、预发布环境、生产环境，各个环境除了接口api的前缀不同之外没有其他差别。
2. 我们应该在打包命令中，配置三个命令dev、build(test在命令中已被使用成测试)、prod。
3. 我们的程序代码，根据不同的打包命令，去配置对应环境下的接口apiUil前缀。

具体实现

package.json

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

我们通过cross-env设置一个参数UMI_ENV，分别赋值为dev、test、prod，对应开发、测试、线上环境。

config/config.js

我们需要在define中，配置一下我们的环境变量，通过 webpack 的 DefinePlugin 传递给代码

  define: {
    'process.env.UMI_ENV':process.env.UMI_ENV || 'dev',
  },

其实这里，已经可以直接配置apiUrl了，只是前期，我们加了一个全局的配置文件，为了减少修改，这里还是用一个环境变量process.env.UMI_ENV存储一下

全局的path.js

let path = 'http://10.0.7.24:13019/api';
console.log('环境',process.env.UMI_ENV)
if(process.env.UMI_ENV==='test'){
    path = 'http://10.0.7.6:13019/api'
}
if(process.env.UMI_ENV==='prod'){
    path = 'https://xxx.yyy.com/api'
}
export default path;

具体的打包

# 本地开发
npm run dev

# 打包测试环境
npm run build

# 打包生产环境
npm run prod

注意

1. 此处在path.js中打印process.env会发现，并没有UMI_ENV属性，这个假象也一度让我觉得值没有传递过来，但是实际通过process.env.UMI_ENV能够获取到我们设定的参数，这个地方为何看不到属性，我也在查询中

参考

umi 配置多环境打包
define 通过 webpack 的 DefinePlugin 传递给代码