Umi MPA 多页面模式怎么配入口、模板与页面级配置速查指南【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiUmi 的 MPA多页面应用模式会扫描pages目录把每个子文件夹里的index文件当作独立入口各自产出一个 HTML没有前端路由和 history。它适合 H5、插件页、静态导出的多页面站点。读完这篇你能按目录约定搭出最小工程理解config.json、入口导出配置、mpa全局配置三层的优先级并在入口不生效、模板不替换时快速定位问题。先判断MPA 模式适合你的场景吗场景是否适合原因每个页面独立成站比如 H5 活动页、文档站适合每个入口产出独立 HTML可直接部署、可被任意静态服务器托管一个应用内大量页面跳转依赖路由状态不适合真 MPA 没有路由机制也没有 umi.js 运行时想用 Umi 大部分插件能力请求、权限等运行时插件不适合官方文档明确说明此模式下大量插件不可用只当构建工具用每个页面要不同的标题、布局、挂载点适合支持页面级配置逐入口自定义注意一个容易混淆的点Umi 4 的 MPA 是真 MPA和 Umi 3 模拟路由的方案完全不同。从 Umi 3 迁过来的项目先确认行为差异再套用旧配置。最短上手路径三步跑通第一个多页面工程不需要一开始配完整先跑通最小例子。打开 MPA 开关。在项目的config.ts或.umirc.ts里加一个mpa配置对象值留空即可export default { mpa: {}, };这一步成功的标志启动或构建后控制台不再输出路由表而是按入口逐个处理。按约定放入口文件。在pages/下建一个文件夹里面放index.tsx默认导出一个 React 组件即可不用自己写ReactDOM.renderpages/ ├── foo/index.tsx └── bar/index.tsx组件只需export default function Page() { ... }。默认走 React 18 渲染要 17 的行为装 17 版本的 react 和 react-dom框架会自己适配。跑一次构建确认产物。执行最短命令umi build这一步成功的标志输出目录里出现foo.html和bar.html文件名与文件夹名一一对应且 HTML 里能看到页面内容。想直接抄作业的话仓库里examples/mpa/就是一个完整的最小工程目录布局和上面完全一致。关键配置心智模型三层配置谁说了算配置分三层理解从哪读比记住字段更重要配置项位置作用注意事项mpa.template全局 config指定所有页面共用的 HTML 模板从项目根目录开始找模板里必须保留% title %和% mountElementId %两个变量缺一个页面就渲染不出来mpa.layout全局 config所有页面共享的默认布局路径建议以/开头指向 srcmpa.entry全局 config按入口名逐个设置属性如给某个入口单独定 title适合入口多但只有一两个需要特殊处理的场景mpa.getConfigFromEntryFile全局 config开启后改为从入口文件读页面配置开启后入口里要export const config { ... }不再用 jsonconfig.json入口同层级页面独立配置支持template、layout、title、mountElementId四个字段MPA_FILTER.env或环境变量只启动列出的页面加速本地开发形如MPA_FILTERbar,foo别带到构建环境里页面级配置有两个来源别混着用文件式入口同级放config.json写title、layout等字段。examples/mpa/pages/foo/config.json里就只配了一个 title。导出式开启getConfigFromEntryFile后直接在index.tsx里export const configexamples/mpa/pages/foo/index.tsx同时演示了导出 title 和 layout 的写法。一个最小片段说明导出式解决什么问题——让页面自己声明布局不用回全局配置里翻export const config { title: foo 页面, layout: /layouts/foo, };模板机制一句话全局template兜底页面级template覆盖。想给某个页面换整套 HTML 骨架就在它的配置里指一个新模板文件模板语法沿用 lodash template 写法。高频问题诊断按这个顺序查1. 入口没被识别构建产物里缺页面现象某个文件夹明明有页面产物里却没有对应的 html。优先检查文件是否严格叫index.tsx或.tsx/.jsx/.ts/.js且直接位于pages/的一级子文件夹里。像pages/hoo.tsx这种散落在根下的单文件不会成为入口。快速动作把文件挪进pages/新目录/index.tsx结构。成功标志重新构建后出现以文件夹命名的 html。2. 模板变量没替换页面空白现象打开产物 html标题是空的或内容挂在空 body 上。优先检查模板里是否同时保留了% title %和% mountElementId %两个变量占位。快速动作对照examples/mpa/templates/default.html补回缺失变量。成功标志页面能渲染出组件且 title 显示为配置值而不是目录名。3. 页面级 layout / title 没生效现象改了config.json刷新后布局还是默认的。优先检查如果配置写在入口文件的export const config里先确认全局配置开了getConfigFromEntryFile否则只认config.json。快速动作两种写法只保留一种路径统一用/别名。成功标志不同入口呈现各自配置的标题与布局。4. 入口扫描不到代码构建报错找不到文件现象把业务代码放在非默认根目录比如 Electron 项目的src/webview构建直接找不到页面。优先检查APP_ROOT是否指向了真实的应用根目录。examples/mpa-with-app-root-and-alias/的脚本里就是用APP_ROOTsrc/webview umi dev解决的。快速动作在启动/构建脚本前缀设置APP_ROOT并把pages、layouts、templates都放进这个根目录。成功标志构建产物里包含该根目录下所有入口的 html。5. 本地启动慢怀疑配置拖累现象页面很多时 dev 启动明显变慢。优先检查是否所有入口都在参与构建。快速动作在.env里写MPA_FILTERfoo,bar只启动当前要改的页面。成功标志启动日志只出现被筛选的入口且调试完成记得删掉或改成构建值。发布前必须核对的 6 项每个页面都是pages/${目录}/index.tsx结构没有散落的单文件每个入口的标题来源唯一config.json、导出 config、mpa.entry三选其一没有互相覆盖模板同时包含title与mountElementId变量所有layout路径以/开头且指向存在的文件构建环境的APP_ROOT、MPA_FILTER与本地开发值已区分没有把筛选值带上线跑一次完整构建逐一打开产物 html 抽查标题、布局、挂载点延伸资料与路径仓库内的真实参考按顺序看官方指南配置项与约定原文docs/docs/docs/guides/mpa.md最小 MPA 工程含config.json、导出式 config、默认模板、两套布局examples/mpa/自定义应用根目录与别名场景examples/mpa-with-app-root-and-alias/【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考