UmiJS MPA 配置全解5 个关键点从零到跑通【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiUmi 的 MPA 模式把src/pages下每个页面独立打包成一个 HTML 文件无路由、无 history适合 H5 和插件研发场景。看完这篇UmiJS MPA 配置从建目录到构建产物你都能自己搞定。H2 一30 秒看懂核心概念先分清三个概念后面就不会晕概念一句话定义和另一者的区别Umi SPA默认单 HTML react-router 页内跳转有路由、有 history插件能力全开Umi MPA 模式每个页面独立 HTML无路由Umi 4 是真 MPA仅当构建工具用部分插件能力不可用页面入口src/pages/x/index.tsx一个文件夹就是一个页面构建产物一一对应一句话记住MPA 下没有umi.js每个入口文件就是一个 webpack entry。顺带一提Umi 3 的 MPA 是 Mock 了路由渲染和 Umi 4 的实现不同升级时别直接照搬旧配置。H2 二从零到跑通最小可运行路径以官方示例 examples/mpa/ 为参照三步跑通Step 1建页面入口// src/pages/foo/index.tsx export default () divHello Foo/div导出 React 组件就行框架会自动渲染不用自己写ReactDOM.render。Step 2开启 mpa// .umirc.ts export default { mpa: {}, };mpa 是内置功能配置即开启空对象也能跑。Step 3启动与构建npm run dev npm run buildbuild 后每个入口对应一个 HTMLfoo、bar两个目录就产出foo.html和bar.html。H2 三高频报错速查新手最常撞的五个坑对号入座现象大概率原因一句话解法⚠️ 构建后页面 404入口不是pages/x/index.tsx入口文件改名为 index.tsxUmiJS MPA 模板不生效自定义模板缺变量必须含% mountElementId %页面标题是默认值没配 titleconfig.json 里加 titlelayout 不生效布局路径写法不对用/layouts/xxx引用页面多导致构建慢全量启动了所有页面用 MPA_FILTER 按需启动H2 四按场景挑进阶用法场景一自定义 HTML 模板UmiJS MPA 模板不生效怎么排查全局或页面级都可以指定template// pages/foo/config.json { template: templates/custom.html, title: foo }模板里至少保留% title %和% mountElementId %两个变量缺了就是模板不生效的常见原因。场景二不用 config.json入口文件直接导配置// .umirc.ts 中开启 mpa: { getConfigFromEntryFile: true }// 入口文件里导配置 export const config { title: foo, layout: /layouts/foo }配置跟代码走改页面不用翻 JSON。场景三按需启动提速在.env里写MPA_FILTERbar,foo只启动这两个页面页面多时构建速度明显提升。场景四APP_ROOT 改目录的正确姿势源码不放在项目根目录典型如 Electron 渲染进程时APP_ROOTsrc/webview umi dev参考 examples/mpa-with-app-root-and-alias/把入口指到src/webview别名照常可用。 配置优先级页面级 config.json / 入口导出 .umirc.ts的mpa.entry全局配置。H2 五上线前自检清单收个尾上线前过一遍.umirc.ts 已开启 mpa确认 pages/[name]/index.tsx 存在模板含 title 与 mountElementId 变量各页面 title、layout 已单独配置构建产物每页对应一个 HTMLMPA_FILTER 未误删页面完整细节以官方文档为准docs/docs/docs/guides/mpa.md更多页面写法看 examples/mpa/。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考