MPA 多页应用

icejs 默认的应用类型是 SPA 单页应用，但在某些业务场景下存在 MPA 多页应用的诉求，基于此 icejs 内置提供了 MPA 的方案。

目录结构

MPA 应用以页面为维度进行划分，每个页面目录下面可单独配置页面的路由等信息，默认以 src/pages/ 下一级目录 app.js 作为应用入口。

  1.   ├── public/
  2. + │   ├── dashboard.html      # dashboard 页面 HTML
  3. + │   ├── index.html          # 未配置页面名称对应的 HTML 会默认使用 index.html
  4.   │   └── favicon.png         # Favicon
  5.   ├── src/                    # 源码
  6.   │   ├── layouts/            # 布局
  7.   │   └── pages/              # 页面
  8.   │        ├── Dashboard/     # Dashboard 页面
  9. + │        │     ├── app.js    # 页面配置入口
  10.   │        │     └── index.jsx      # 页面组件入口
  11.   │        └── Home/
  12. + │             ├── app.js
  13.   │             └──index.jsx
  14.   ├── build.json
  15.   ├── package.json
  16.   └── tsconfig.json

工程配置

在工程配置文件 build.json 中开启 MPA 应用配置：

  1. {
  2.   "mpa": true
  3. }

路由配置

开启 MPA 插件后，默认添加路由（包括配置/约定）的逻辑失效，需要手动配置 MPA 应用的路由，在 MPA 场景下一般路由配置比较简单可以直接在 app.js 中进行配置：

配置如下：

  1. import { createApp } from 'ice';
  2. + import Dashboard from './index';
  4. const appConfig = {
  5. + router: {
  6. +   routes: [{ path: '/', component: Dashboard }]
  7. + }
  8. };
  10. createApp(appConfig);

状态管理

在 MPA 场景下，我们推荐按照页面维度进行状态的管理，推荐的目录结构如下：

  1.   ├── src/pages
  2.   │    ├── Dashboard/
  3. + │    │   ├── models/        # 状态管理
  4.   │    │   ├── app.js
  5.   │    │   └── index.jsx
  6.   │    └──  Home/
  7. + │         ├── models/
  8.   │         ├── app.js
  9.   │         └── index.jsx
  10.   ├── build.json
  11.   ├── package.json
  12.   └── tsconfig.json

注意：如果 layouts 中有状态管理需求，可以使用全局 models 的组织形式，但请不要在全局 models 管理页面的状态，否则会引起不必要的代码打包。

关于状态管理的更多内容，请查看文档 状态管理

只需要这么简单，你的 SPA 应用就可以变成 MPA 应用了。