快速跑通 UmiJS MPA每个页面独立出一个 HTML3 处配置搞定【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi给每个营销活动单独出一个落地页又不想维护 N 套工程时UmiJS MPA 模式就是最快路径每个页面独立打包、独立出一个 HTML无路由、无 history。下面带你基于官方示例把它开起来、配明白再避开最常见的坑。5 分钟跑通一个两页 MPA 站点整个项目只需要三类文件入口、布局、模板结构长这样my-mpa/ ├── .umirc.ts # 开启 MPA 模式 ├── pages/ │ ├── foo/index.tsx # foo 页面入口 │ └── bar/index.tsx # bar 页面入口 ├── layouts/basic.tsx # 全局布局 └── templates/default.html # HTML 模板入口文件只导出一个 React 组件不用自己写ReactDOM.renderUmi 会按约定自动生成挂载代码// pages/foo/index.tsx import React from react; export default () { return divHello MPA Foo/div; };执行npm run dev启动然后分别访问/foo.html和/bar.html。你会看到两个完全独立的页面各自的标题、各自的布局两份 JS 互不干扰。这就是 MPA 和 SPA 的本质区别。MPA 核心配置逐项拆解怎么开启 MPA 模式MPA 是内置功能配置里出现mpa这个 key 即生效不需要装任何插件// .umirc.ts export default { mpa: {}, };如果启动时控制台没有MPA Mode Enabled提示则是mpa拼写有误或配置文件没被加载先确认这两点。config.json 控制哪些页面级配置入口文件同层的config.json是页面级配置只管当前这一个页面的标题、布局、模板和挂载点改它不影响其他页面{ title: title from config.json, layout: /layouts/basic.tsx }如果这里配的title没出现在 HTML 里则检查config.json是否和index.tsx放在同一目录目录不同就不会被识别。HTML 模板放哪、布局怎么写每个页面的产物 HTML 由模板生成模板里用 lodash template 语法写变量title、mountElementId这些会由 Umi 自动注入!DOCTYPE html html head title% title % - default/title /head body div id% mountElementId %/div div% description %/div /body /html布局组件负责包裹页面内容全局默认用mpa.layout指定单个页面再用config.json里的layout覆盖// layouts/basic.tsx import React from react; export default (props: any) ( div h2basic layout/h2 {props.children} /div );如果改了模板产物没变化则检查mpa.template指向的路径是否真实存在它是从项目根目录开始寻找的。⚠️ MPA 实战必踩的 3 个坑坑 1新增的页面没生成独立 html【症状】新加了目录产物里找不到对应页面或内容被渲染进了主页面路由里。 【原因】入口文件不叫index.tsx或者没直接放在pages/下。 【修复】改名为pages/xxx/index.tsx后重启页面即会独立成xxx.html。坑 2config.json 里配了 layout 不生效【症状】页面标题变了布局却没套上。 【原因】layout用了相对路径构建时解析不到对应文件。 【修复】路径以/开头layout: /layouts/basic.tsx。坑 3页面一多dev 启动变慢【症状】页面越多启动越久而你只想调试其中两个。 【原因】MPA 默认会把全部入口都编译一遍。 【修复】在.env里加一行MPA_FILTERbar,foo只启动这两个页面。说白了MPA 就是「一个目录一个 html」入口放pages/xxx/index.tsx配置里开mpa模板和布局按需配。动手前可以直接抄 examples/mpa/ 的目录结构配置项的完整细节看 docs/docs/docs/guides/mpa.md。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
