方案概述

Ant Design Pro作为企业级中后台开发框架，深度整合了Ant Design设计体系与umi构建工具，通过组件库扩展、模板沉淀和设计资源整合，打造了覆盖「使用者」与「开发者」双重视角的高效开发体系。该方案持续吸纳社区反馈，形成完整的解决方案闭环

初始化

npm i @ant-design/pro-cli -g
pro create myapp

然后选择脚手架，simple 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，不太适合当基础模板来进行二次开发

? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
  complete

安装依赖：

脚手架初始化成功之后就可以开始进行开发了，Ant Design Pro 提供了一些命令来辅助开发。

cd myapp && pnpm install

运行

complete 脚手架运行会报错：🐛 [BUG] 路由错误 #11189，需要修改 routes.ts 文件，注释掉 /user 路由下的 404 路由（全局有一个 404 可以兜底）：

{
  path: '/user',
  layout: false,
  routes: [
    // {
    //   component: '404',
    //   path: '/*',
    // },
  ],
}

然后执行 yarn start 即可启动项目。

修改调试 MOCK

app.tsx 文件中的 baseURL 注释掉，或者根据 isDev 判断：

/**
 * @name request 配置，可以配置错误处理
 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
 * @doc https://umijs.org/docs/max/request#配置
 */
export const request: RequestConfig = {
  baseURL: isDev ? '' : 'https://proapi.azurewebsites.net',
  ...errorConfig,
};

部署

netlify
如果不使用 github pages，需要把模版中 gh-pages 删掉：

删除 public 目录下的 CNAME 文件
删除 gh-pages 依赖和 npm script 脚本
然后在 public 目录下添加 _redirects 文件，内容

<!-- https://gist.github.com/dance2die/acf9a148ec8025364bf0b6cf37367294 -->
/*    /index.html   200