博客

通常情况下，一个项目区分开发环境，测试环境，生产环境，因为后端给的接口测试环境和生产环境的不一样，并且我们的也不是网站前缀，正式环境也需要自己配置，然后整个项目是用umi搭建的，所以用了cross-env来配置不同的环境

1、安装cross-env

npm i cross-env -S

2、修改package.json文件

    "dev": "cross-env UMI_ENV=dev UMI_DEV=true umi dev",
    "start": "cross-env UMI_ENV=prod umi dev",
    "build": "cross-env UMI_ENV=prod umi build",
    "build-dev": "cross-env UMI_ENV=dev UMI_DEV=true umi build",

打包或启动对应命令，生产环境UMI_ENV=prod，测试环境UMI_ENV=dev，从而区分不同的环境

3、新增config.dev.ts和config.prod.ts文件

config.dev.ts 如下

import { defineConfig } from 'umi';
/**
 * UMI 配置
 * 更多相关配置查询 https://umijs.org/zh-CN/docs/config
 */
export default defineConfig({
  define: {
    "process.env.UMI_ENV": process.env.UMI_ENV,
  },
});

config.prod.ts如下

import { defineConfig } from 'umi';
/**
 * UMI 配置
 * 更多相关配置查询 https://umijs.org/zh-CN/docs/config
 */
export default defineConfig({
  define: {
    "process.env.UMI_ENV": process.env.UMI_ENV,
  },
});

4、使用

然后就可以在你的请求文件中配置接口的baseUrl

let api = "https://dev.xxx.com"; //测试服
if(process.env.UMI_ENV === 'dev'){
  api="https://dev.xxx.com" //测试服
}else if(process.env.UMI_ENV === 'prod'){
  api="https://www.xxx.com"  //正试服
}