umi 配置

通过起步,我们已经知道了如何初始化创建一个 umi 脚手架的项目以及基本用法,通过 yarn create umi / npm create umi 初始化项目,这一小节介绍一下 umi 的常用配置
我们知道 umi 的配置项是在 umirc 中配置,还有一种方法是在 umirc 中同级创建文件夹 config,在 config/config 中我们也可以去对 umi 进行配置,需要注意的是 umirc 和 config 不能同时存在
以下所有代码都是在 umirc.ts 中去配置的

router

配置 umi 的路由信息,这种方法是将路由抛出的一种写法,因为路由配置是一个经常需要修改的一个配置,所以这里给他抛出重新引入,因为配置项多了找起来会比较麻烦,推荐这种写法

1
2
3
4
5
6
7
8
9
//.umirc.ts
import { defineConfig } from "umi";
//路由我们可以新建文件夹直接引入
import routes from "./routes";

export default defineConfig({
  fastRefresh: {},
  routes,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// router/index.ts
export default [
  {
    //所有跟路由以下的页面都使用layouts模板
    //layouts模板是umi的一个约定
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login",
    component: "@/pages/login",
  },
  {
    path: "/user",
    component: "@/layouts",
    routes: [
      { path: "/user", component: "@/pages/index" },
      { path: "/user/one", component: "@/pages/one" },
      //wrappers 是类似中间件的一个配置用来做一个权限的控制后边会说到这里只是演示一下router的抛出
      {
        path: "/user/two",
        component: "@/pages/two",
        wrappers: ["@/wrappers/authorization"],
      },
      { component: "@/pages/404" },
    ],
  },
  {
    component: "@/pages/404",
  },
];

还有一种是直接在 umirc.ts 中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { defineConfig } from "umi";

export default defineConfig({
  nodeModulesTransform: {
    type: "none",
  },
  fastRefresh: {},
  //在这里直接配置,推荐上边的那种方法
  routes: [
    {
      path: "/login",
      component: "@/pages/login",
    },
  ],
});

title

这个配置项主要是用来修改标题的,是浏览器打开后标题显示的内容

配置了 title 属性后标题就会改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  //这里属于全局标题的一个配置项,他可以改变标题的内容,权重是最低的
  title:'Umijs'
  fastRefresh: {},
  //路由配置
  routes: [
  	{
        path: '/login',
        component: '@/pages/login',
        //路由也可以配置子级的标题,如果有配置子级标题,全局标题会失效,显示子级的配置内容
        title:'登录页面',
    },
  ]
});

hash

这个配置项是一个boolean,他主要是在我们build的时候会起作用,默认配置是 false,

1
2
3
4
5
6
7
8
9
10
//.umirc.ts
import { defineConfig } from "umi";
//路由我们可以新建文件夹直接引入
import routes from "./routes";

export default defineConfig({
  fastRefresh: {},
  routes,
  hash: false,
});

………没写完