UMI+TS项目 配置多环境打包

需求：配置dev、test、staging、production 环境，打包使用不同API地址。

1. 创建不同环境的配置文件
   （1）官方文档：多环境多份配置
   （2）创建配置文件
   
2. 配置环境变量
   （1）官方文档：环境变量
   （2）例：
   umirc.test.ts

import { defineConfig } from 'umi';

export default defineConfig({
  define: {
    // test 环境的请求基础地址
    'process.env.ENV': 'test',
    'process.env.API_ROOT': 'http://test.xxx.xx.xx:50000'
  },
  proxy: { // 本地跨域可配置跨域代理
    '/api': {
      target: 'http://192.168.0.xxx:50000/',
      ws: true,
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
});

umirc.staging.ts

import { defineConfig } from 'umi';

export default defineConfig({
  define: {
    // staging环境的请求基础地址
    'process.env.ENV': 'staging',
    'process.env.API_ROOT': 'http://staging.xxx.xx.xx:50000'
  },
  },
});

3. 配置启动、打包命令
   （1）需要安装 cross-env

	yarn add cross-env --dev

（2）在 package.json 配置如下

 	"start:test": "cross-env UMI_ENV=test umi dev", // 启动命令
    "build:test": "cross-env UMI_ENV=test umi build", // test打包命令
    "build:staging": "cross-env UMI_ENV=staging umi build",
    "build:production": "cross-env UMI_ENV=production umi build",

4. Umi-request 使用：

const request = extend({
  timeout: 20000,
  prefix: process.env.ENV !== 'dev' ? process.env.API_ROOT : '/api',
  errorHandler, // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie
});

---

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！