基于antd pro框架，配置接口apiUrl前缀

Posted 2021-04-24 韶华随记

背景

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

解决思路

 1. 结合目前的情况，我们现有三个环境，本地开发、测试环境、~~`预发布环境`~~、生产环境，各个环境除了接口api的前缀不同之外没有其他差别。

 2. 我们应该在打包命令中，配置三个命令`dev`、`build`(test在命令中已被使用成测试)、`prod`。

 3. 我们的程序代码，根据不同的打包命令，去配置对应环境下的接口`apiUil`前缀。  

具体实现

1.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`，对应`开发`、`测试`、`线上`环境。

2.config/config.js

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

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

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

3.全局的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://channel-api.xxxinrong.com/api'}export default path;

4.具体的打包

# 本地开发npm run dev
# 打包测试环境npm run build
# 打包生产环境npm run prod

注意

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