2、Ant Desing Pro config文件浅析

（1）process.env

process是node的一个全局模块，可以用它来得到node进程的一些相关信息，比如环境变量

（2）defineConfig

hash

配置是否让生成的文件包含 hash 后缀，通常用于避免浏览器加载缓存。

antd

整合 antd 组件库

antd: {
    dark: true, // 开启暗色主题
    compact: true, // 开启紧凑主题
},

dva

整合 dva 数据流

dva: {
    immer: true, // 表示是否启用 immer 以方便修改 reducer
},

dynamicImport

是否启用按需加载，即是否把构建产物进行拆分

 dynamicImport: {
    loading: '@/components/PageLoading/index', // 也可以自定义loading加载
 },

targets

配置需要兼容的浏览器最低版本

targets: {
    ie: 11, 
},

theme

配置主题

theme: {
    'primary-color': defaultSettings.primaryColor,
},
// 以下是可配置项
@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影

manifest

配置是否需要生成额外用于描述产物的 manifest 文件，默认会生成 asset-manifest.json

manifest: {
    basePath: '/', // 给所有文件路径加前缀
},

最后，我们来分析下 routes，在红色框中是加载的布局文件，当我们访问路由为：”/user”、”/“…，系统会依次加载 layouts 文件下的 UserLayout.jsx、SecurityLayout.jsx、BasicLayout.jsx，我们可以在设计布局及权限控制。

当然了，如果我们不喜欢它的基础布局（比如登陆页面），我们也可以自行编写，然后在上述红色框位置加载即可。

其中，这三个文件中具体内容，我们也会在后面的文档中逐一讲到。