ant design pro 的统一配置管理

作为一个 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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式