config/config.ts 下配置

export default defineConfig({
  // ...
  layout: {},
});

可以在这里直接加一些配置信息，也可以在 umi 的运行时配置文件中加配置，下面在运行时配置时进行添加。

这样加上后，重新 yarn start 项目，就会发现，页面左侧的菜单 umi 自动给你生成出来了，页面布局大概长这样，

这是默认的布局， 也可以通过配置去修改。

运行时配置时添加 layout 布局配置。

1. src 目录下新增 layouts 目录，用于存放 layout 相关的页面和组件。
2. src 目录下新增 assets 目录，用于存放一些图片等，比如说你想要在菜单最左上方加个 logo。

3. 在 src 下新建 app.tsx 运行时配置文件。

运行时配置具体是啥自行访问查看官方文档——运行时配置。

import { LayoutHeader } from '@/layouts/BasicLayout';
import { img_logo } from '@/assets/images';

export const layout = (config: any) => {
  return {
    ...config,
    headerRender: () => <LayoutHeader />,
    iconfontUrl: '//at.alicdn.com/t/font_2724271_ywgl62i7sen.js',
    logo: img_logo,
    title: false,
    fixSiderbar: true,
    breakpoint: false,
    defaultCollapsed: false,
    fixedHeader: true,
    siderWidth: 200,
  };
};

iconfontUrl 是 iconfont 的地址，按理说应该用全局变量来赋值的，这里就直接简单着来了。

返回目录文档