解决 Ant Design Pro + Umi 项目中 Umi UI 连接失败问题

前端

2023-09-05 16:46:21

前言

在使用 Ant Design Pro 和 Umi 开发项目时，你可能会遇到 Umi UI 连接失败的问题。这个问题可能令人沮丧，但通过以下步骤，你可以轻松找出并解决它。

调试一

点击 以下按钮
Umi

如果出现 "Umi UI 已连接"，则表示 Umi UI 已成功连接。如果不是，请继续执行调试二。

调试二

检查你的 package.json 文件，确保你安装了 @umijs/plugin-layout 和 @umijs/preset-react。
在你的项目目录中运行 npm run umi dev 命令。
在浏览器中打开 http://localhost:8000。
查看控制台是否有任何错误消息。

常见错误消息

**Module not found: Can't resolve 'plugin-layout'。这表明你没有安装 @umijs/plugin-layout。运行 npm install @umijs/plugin-layout` 命令进行安装。
**Module not found: Can't resolve 'preset-react'。这表明你没有安装 @umijs/preset-react。运行 npm install @umijs/preset-react` 命令进行安装。
**TypeError: Cannot read properties of undefined (reading 'getPageLayout')。这表明你没有正确配置 routes.ts文件。确保你的routes.ts` 文件包含以下内容：

import { defineConfig } from 'dva';
import createLoading from 'dva-loading';

export default defineConfig({
  plugins: [createLoading()],
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  layout: {
    // layout 的配置
  },
});