ant design pro 的统一配置管理

更新日期: 2024-11-21 阅读次数: 276 字数: 318 分类: ReactJS

作为一个 CRUD boy,经常要新建管理后台的项目。确切的说,应该是经常要 ctrl c / ctrl v 来 copy 老的项目。

但是 ant design pro 好多配置不在一个统一的配置文件中,需要去多个地方修改设置。例如:

  • 顶部标题
  • 登录页的标题
  • logo 顶部,及登录页

到处找配置,非常浪费脑细胞,本已稀疏的头发也经受不住这么折腾。所以还是能统一管理比较好。

统一配置文件在哪里

config/defaultSettings.ts

虽然这里定义了一些配置。但是像登录页的标题就不受这里控制。

登录页使用配置文件中的标题

import defaultSettings from '@/../config/defaultSettings';

const { title } = defaultSettings;

<span className={styles.title}>{title}</span>

这里的 @ 符号对应的路径,定义在文件 jsconfig.json:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

其他页面的修改,可以参考这个方式,集中到一处,下次复制黏贴时,效率就高了不少。

加载页的 title

config/config.ts 中,有个 layout 配置,读取了 defaultSettings 中的 title:

import defaultSettings from './defaultSettings';

  layout: {
    // https://umijs.org/zh-CN/plugins/plugin-layout
    //locale: true,
    siderWidth: 208,
    ...defaultSettings,
  },

所以,直接修改:

src/pages/document.ejs

<title><%= context.config.layout.title%></title>
<link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式