umijs 开启mpa 每个页面手动配置路由规则，并且确保路径正确指向对应的HTML文件 详细代码案例

UmiJS 是一个可插拔的企业级前端应用框架，它基于 React 生态系统。在 UmiJS 中，默认情况下使用的是单页面应用（SPA）的路由模式，但是它也支持多页面应用（MPA）模式。要在 UmiJS 中开启 MPA 并为每个页面手动配置路由规则，你需要进行一些配置。

以下是一个简单的 UmiJS 项目中，如何开启 MPA 模式并为每个页面手动配置路由规则的示例：

1. 首先，在 `.umirc.js` 或者 `config/config.js` 配置文件中启用 MPA 模式：

// .umirc.js 或者 config/config.js
export default {
  mpa: {
    // 指定多页面应用的页面
    each: [
      '/page1',
      '/page2',
      // ... 其他页面路径
    ],
  },
};

2. 然后，在 `pages` 目录下创建对应的页面文件夹，例如 `page1` 和 `page2`，并在每个文件夹内创建对应的 `.js` 文件和 `.html` 文件。例如，对于 `/page1`：

pages/
  page1/
    page1.js
    page1.html

在 `page1.js` 文件中，你可以编写 React 组件：

// pages/page1/page1.js
export default () => <div>Hello, this is page 1.</div>;

`page1.html` 文件定义了页面的结构，通常情况下，你可以简单地这样写：

<!-- pages/page1/page1.html -->
<div id="root"></div>

3. 最后，你需要手动创建路由文件，通常位于 `src/` 目录下：

// src/routes.js
export default [
  {
    path: '/page1',
    component: './page1',
  },
  {
    path: '/page2',
    component: './page2',
  },
  // ... 其他页面路由配置
];

这样配置后，访问 `http://localhost:8000/page1` 将会渲染 `page1.html` 文件，并在其中加载 `page1.js` 中定义的 React 组件。