umi 配置多环境编译打包

平时我们开发应用时环境有开发环境、测试环境、生产环境等,此时我们需要配置不同的环境,获取不同的apiUrl前缀，以满足日常开发需要。

1.安装 cross-env 插件

npm install --save-dev cross-env

2.创建不同环境的配置文件

例如：需要 dvl、sit 两个环境，因此创建两个配置文件，如图：

image.png

3. 配置需要的环境变量

此部分可参考：
https://v2.umijs.org/zh/config/#define

dvl环境：新建.umirc.dvl.ts文件

import { defineConfig } from 'umi';

export default defineConfig({
  define: {
    // dvl 环境的请求基础地址
    'process.env.apiUrl': 'http://xxx.xxx.xx.xx:8080'
  }
});

sit环境 .umirc.sit.ts

import { defineConfig } from 'umi';

export default defineConfig({
  define: {
    // dvl 环境的请求基础地址
    'process.env.apiUrl': 'http://xxx.xxx.xx.xx:8080'
  }
});

4. 配置启动命令

在 package.json 配置如下命令：

{
  ...
  "start:dvl": "cross-env UMI_ENV=dvl umi dev",
  "start:sit ": "cross-env UMI_ENV=sit umi dev",
  "build:dvl": "cross-env UMI_ENV=dvl umi build",
  "build:sit": "cross-env UMI_ENV=sit umi build",
  ...
}

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

console.log(process.env.apiUrl);

这样子基本就OK了

参照：
https://blog.csdn.net/weixin_39551188/article/details/112960237
https://www.codercto.com/a/56964.html
https://segmentfault.com/a/1190000023885434
https://www.58h.com.cn/a/UmiXiangMuDuoHuanJingDaBaoPeiZhi.html
https://www.yuque.com/blueju/blog/yayh66