对于 umi 中能使用的自定义配置,你可以使用项目根目录的 .umirc.ts
文件或者 config/config.ts
,值得注意的是这两个文件功能一致,仅仅是存在目录不同,2 选 1 ,.umirc.ts
文件优先级较高
umi 的配置文件是一个正常的 node 模块,它在执行 umi 命令行的时候使用,并且不包含在浏览器端构建中。
按照官网项目默认使用的是.umirc.ts,如果想要使用自己的配置,那么在根目录创建config/config.ts,并且删除.umirc.ts,不然还会读取.umirc.ts。
首先是关于umirc.ts文件的配置 也就是项目构建时配置
import { defineConfig } from '@umijs/max';
export default defineConfig({
antd: {},//antd配置
access: {},//权限配置
model: {},//数据流配置
initialState: {},
request: {},//请求配置
layout: {//模板页配置
title: '数据工厂',
},
routes: [//配置路由
{
path: '/',
redirect: '/home',
},
{
name: '数据源管理',
path: '/home',
routes: [
{
path: '/home',
redirect: '/home/Index',
},
{
name: '接口管理',
path: '/home/Index',
component: './Home',
},
{
name: '数据库管理',
path: '/home/dataBase',
component: './DataBase',
},
]
},
{
name: '权限演示',
path: '/access',
hideInBreadcrumb: false,
component: './Access',
},
{
name: ' CRUD 示例',
path: '/table',
component: './Table',
},
],
npmClient: 'pnpm',
});
常用配置
要在非根目录下部署 umi 项目时,你可以使用 base 配置。
base 配置允许你为应用程序设置路由前缀。比如有路由 /
和 /users
,设置 base 为 /foo/
后就可通过 /foo/
和 /foo/users
访问到之前的路由。
browser history - 适用于支持 HTML5 history API 的现代浏览器
hash history - 适用于旧版浏览器,或者你想把 location 保存到 hash 部分,避免由于后端服务器不支持而报错
memory history - 把 history 保存在内存里,适合非浏览器环境,如 React Native 或测试时
插件配置,开启和使用插件需要在配置页面做插件配置