umi 中配置项目有两种方式。
一是使用 .umirc.ts 一系列的配置文件进行配置。
二就是在 config/config.ts 一系列的文件中进行配置。
官方建议：如果项目不复杂，使用第一种，否则就使用第二种。
下面使用的是第二种方式进行配置。
注意：
.umirc.ts 文件的优先级高于 config 的方式，而使用 umi 创建命令初始化出来的项目，默认带有 .umirc.ts 这个文件，而我们这里使用的是 config 的方式，所以需要删除 .umirc.ts 文件。
在根目录下创建一个 config 的目录，并在改目录下新建 config/config.ts、 config/config.local.ts、config/config.dev.ts、config/config.prod.ts，这些文件的作用是
├─ config
│ ├─ config.local.ts // ? 本地临时配置文件，优先级最高
│ ├─ config.dev.ts // ? 测试环境配置文件
│ ├─ config.prod.ts // ? 正式环境配置文件
│ ├─ config.ts // ? 项目公共配置文件，项目最终的配置，就是 此文件配置加上面各环境下的配置覆盖合并后的配置
│ └─ routes.config.ts // ? 抽离出来的，专门用于处理项目中所有路由配置文件，下面会说
提示：
上面说的覆盖合并，是各环境配置文件合并覆盖公共文件，可以理解成 Object.assign(公共配置，各环境配置)
需要注意一点的是，只要各环境配置文件设置了属性值，哪怕属性值设置的是个空串，也会合并掉公共配置
大概就是这个意思：
Object.assign({a: 'a'}, {a: ''}) => {a: ''}
并不是上面所有的环境文件都得加，也并不是就只有上面那些环境文件，这个时你项目的实际情况而定，比如说
- 你项目不需要本地开发环境，联调是直接在测试环境上联调，可以删除上面
config.local.ts - 或者如果你项目需要预发布环境，则也可以加上预发布环境的环境配置文件。
公共配置文件 - config.ts
一些项目公共的配置，就可以直接在这里设置，就不用在各环境配置文件中每个都去设置一次了，举个例子，如项目中的路由配置，就可以直接在这个公共的配置文件中进行配置。
将项目路由配置抽离成一个单独的文件进行导出使用
config 目录下新建 config/routes.config.ts 文件，项目 src/pages 目录下随便建一些页面模块，然后配置路由。
/*
* @Description: 路由配置文件
* @Author: kivet
* @Date: 2022-01-02 15:37:56
* @LastEditTime: 2022-01-02 15:57:31
*/
const route = [
{
name: '登录',
path: '/login',
component: '@/pages/Login',
hideInMenu: true,
},
{
path: '/404',
component: '@/pages/404Page',
},
{
path: '/',
redirect: '/postManager',
},
{
name: '帖子管理',
path: '/postManager',
component: '@/pages/PostManager/List',
},
];
export default route;
可直接在这里配置路由，像上面那样，但是这样是把项目中所有路由都配置在这里，这样子如果项目中模块多了的话，看不来会很杂乱，之后可以针对这个文件再进行优化，后面再说，这里主要是为了展示配置的路由结构是咋样的。
这路由只是随便配的一点，之后会有改动。先随便配一两个看页面是否展示出来。
config.ts 文件导入使用
/*
* @Description: 项目的公共配置
* @Author: kivet
* @Date: 2022-01-02 15:31:17
* @LastEditTime: 2022-01-02 18:54:18
*/
import { defineConfig } from 'umi';
import routes from './routes';
export default defineConfig({
routes,
});
其余各环境配置文件
下面先只是简单得配置测试下，如给每个环境设置一个全局变量值
config.local.ts
/*
* @Description: local 本地开发时项目配置
* @Author: kivet
* @Date: 2022-01-02 15:59:37
* @LastEditTime: 2022-01-02 16:34:37
*/
import { defineConfig } from 'umi';
export default defineConfig({
define: {
APP_ENV: 'local',
},
});
config.dev.ts
/*
* @Description: 测试环境项目配置
* @Author: kivet
* @Date: 2022-01-02 16:17:27
* @LastEditTime: 2022-01-02 19:01:00
*/
import { defineConfig } from 'umi';
export default defineConfig({
define: {
APP_ENV: 'dev',
},
});
config.prod.ts
/*
* @Description: 正式环境项目配置
* @Author: kivet
* @Date: 2022-01-02 16:18:14
* @LastEditTime: 2022-01-02 18:10:52
*/
import { defineConfig } from 'umi';
export default defineConfig({
define: {
APP_ENV: 'prod',
},
});
注意：
上面定义了的那个全局变量，需要在根目录下的 typings.d.ts 文件中声明
declare const APP_ENV: string;
这样，全局使用这个变量时，才不会报 TS 校验错误提示。
针对各环境配置执行命令行
由于 windows 不支持 NODE_ENV=development 的设置方式，所以这里需要安装一个 npm 包： cross-env
yarn add cross-env -D
配置 package.json 文件的 script
{
"scripts": {
"start": "cross-env PORT=8000 umi dev", // ? 以本地环境（local）启动
"start:dev": "cross-env PORT=8001 UMI_ENV=dev umi dev", // ? 以测试环境（dev）启动
"start:prod": "cross-env PORT=8002 UMI_ENV=prod umi dev", // ? 以正式环境（prod）启动
"build:dev": "cross-env UMI_ENV=dev umi build", // ? 打包测试环境（dev）的包
"build:prod": "cross-env UMI_ENV=prod umi build", // ? 打包正式环境（prod）的包
// ...
},
// ...
}
测试是否配置生效
会使用到一个 serve 的包
yarn global add serve // ? 我这里是直接安装到全局的
配置
// package.json
{
"scripts": {
"serve": "serve ./dist",
}
}
随便在哪个页面中，打印或展示一下 APP_ENV 这个上面定义的变量
<div>当前环境： {APP_ENV}</div>
分别使用 yarn build:dev、yarn build:prod 两个命令打包，每次打包完成后执行 yarn serve 命令，访问对应的地址链接，查看这个变量分别是什么值，如果是设置的对应的值，说明配置成功了。
注意：
只要是使用 umi dev 命令启动的项目，都走的是 local（local优先级最高）, 所以，上面配置的三个项目启动命令（start），都走的是local，通过 build 打包的项目，没有走 umi dev ，所以才可以获取到对应的环境变量值。
[0] cross-env
