Umi MPA 模式完整指南三步搭建多页面应用【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiUmi MPA 模式把src/pages下的每个文件夹当成一个独立入口构建时为每个页面单独输出一份 HTML 文件无路由、无 history、无 umi.js。如果你的需求是 H5 活动页、营销站点或 Electron 渲染进程它比 SPA 模式更省事。先搞清楚Umi 4 的 MPA 是真 MPA很多教程讲的是 Umi 3 的 MPA那种实现其实是通过 Mock 路由渲染机制模拟出来的。Umi 4 的 MPA 是真正的多页面每个入口文件独立打包、独立产出 HTML代价是它更接近一个构建工具无法使用 Umi 的大量插件能力。选它之前想清楚你要的是每个页面独立访问、独立加载而不是框架的全家桶。开启方式是在.umirc.ts里加一个mpa配置项它不是命令行参数export default { mpa: { template: templates/default.html, layout: /layouts/basic.tsx, }, };官方示例仓库可以克隆下来对着看完整配置参考 docs/docs/docs/guides/mpa.mdgit clone https://gitcode.com/GitHub_Trending/um/umi目录约定一个文件夹就是一个页面入口约定是src/pages/${dir}/index.tsx文件夹名即页面名。以官方示例 examples/mpa/ 为例examples/mpa ├── pages │ ├── foo │ │ ├── index.tsx │ │ └── config.json │ └── bar │ └── index.tsx ├── layouts │ └── basic.tsx └── templates └── default.html构建后会同时产出foo.html和bar.html。入口文件只需默认导出一个 React 组件框架会自动帮你完成挂载不需要手写ReactDOM.render。默认使用 React 18如果你要 React 17安装对应版本依赖后框架会自动适配。用 config.json 给每个页面单独配置标题和模板全局配置解决不了每个页面不同标题这类问题MPA 模式约定了页面级配置在入口文件同层级放一个config.json。{ layout: /layouts/foo.tsx, title: foo 页面标题 }config.json支持四个字段template该页面专用模板、layout该页面布局、title页面标题默认取文件夹名、mountElementId挂载节点 id默认root。不想用 json 的话可以开启试验性的mpa: { getConfigFromEntryFile: true }改为在入口文件里直接export const config { title: foo }两种写法选一种即可。自定义 HTML 模板模板变量只有两个坑HTML 模板放在项目根目录下的任意位置通过template配置指向它。模板本质是 lodash template 语法必须保留title和mountElementId两个变量官方示例模板如下head title% title % - default/title /head body div id% mountElementId %/div /body布局方面mpa.layout设置全局默认布局页面级的config.json再按页面覆盖两者互不冲突。示例里的layouts/basic.tsx就是一个接收children的普通 React 组件。两个容易踩的坑APP_ROOT 和按需启动源码不在根目录时用 APP_ROOT。比如 Electron 项目的渲染层代码放在src/webview下示例 examples/mpa-with-app-root-and-alias/ 的启动脚本这样写{ dev: APP_ROOTsrc/webview umi dev }此时tsconfig.json的paths别名也要同步调整该示例把/shared指向根目录下的共享代码。页面多了构建慢时用 MPA_FILTER。在项目.env里配置MPA_FILTERbar,foo开发时只会启动列出的这几个页面其余页面不打包。最后提醒MPA 模式下路由类插件、约定式路由等能力基本用不上把它当带 MPA 约定的构建工具来预期就不会有太多落差。完整配置项说明见 MPA 模式官方文档可运行示例在 examples/mpa/。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Umi MPA 模式完整指南：三步搭建多页面应用
Umi MPA 模式完整指南三步搭建多页面应用【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiUmi MPA 模式把src/pages下的每个文件夹当成一个独立入口构建时为每个页面单独输出一份 HTML 文件无路由、无 history、无 umi.js。如果你的需求是 H5 活动页、营销站点或 Electron 渲染进程它比 SPA 模式更省事。先搞清楚Umi 4 的 MPA 是真 MPA很多教程讲的是 Umi 3 的 MPA那种实现其实是通过 Mock 路由渲染机制模拟出来的。Umi 4 的 MPA 是真正的多页面每个入口文件独立打包、独立产出 HTML代价是它更接近一个构建工具无法使用 Umi 的大量插件能力。选它之前想清楚你要的是每个页面独立访问、独立加载而不是框架的全家桶。开启方式是在.umirc.ts里加一个mpa配置项它不是命令行参数export default { mpa: { template: templates/default.html, layout: /layouts/basic.tsx, }, };官方示例仓库可以克隆下来对着看完整配置参考 docs/docs/docs/guides/mpa.mdgit clone https://gitcode.com/GitHub_Trending/um/umi目录约定一个文件夹就是一个页面入口约定是src/pages/${dir}/index.tsx文件夹名即页面名。以官方示例 examples/mpa/ 为例examples/mpa ├── pages │ ├── foo │ │ ├── index.tsx │ │ └── config.json │ └── bar │ └── index.tsx ├── layouts │ └── basic.tsx └── templates └── default.html构建后会同时产出foo.html和bar.html。入口文件只需默认导出一个 React 组件框架会自动帮你完成挂载不需要手写ReactDOM.render。默认使用 React 18如果你要 React 17安装对应版本依赖后框架会自动适配。用 config.json 给每个页面单独配置标题和模板全局配置解决不了每个页面不同标题这类问题MPA 模式约定了页面级配置在入口文件同层级放一个config.json。{ layout: /layouts/foo.tsx, title: foo 页面标题 }config.json支持四个字段template该页面专用模板、layout该页面布局、title页面标题默认取文件夹名、mountElementId挂载节点 id默认root。不想用 json 的话可以开启试验性的mpa: { getConfigFromEntryFile: true }改为在入口文件里直接export const config { title: foo }两种写法选一种即可。自定义 HTML 模板模板变量只有两个坑HTML 模板放在项目根目录下的任意位置通过template配置指向它。模板本质是 lodash template 语法必须保留title和mountElementId两个变量官方示例模板如下head title% title % - default/title /head body div id% mountElementId %/div /body布局方面mpa.layout设置全局默认布局页面级的config.json再按页面覆盖两者互不冲突。示例里的layouts/basic.tsx就是一个接收children的普通 React 组件。两个容易踩的坑APP_ROOT 和按需启动源码不在根目录时用 APP_ROOT。比如 Electron 项目的渲染层代码放在src/webview下示例 examples/mpa-with-app-root-and-alias/ 的启动脚本这样写{ dev: APP_ROOTsrc/webview umi dev }此时tsconfig.json的paths别名也要同步调整该示例把/shared指向根目录下的共享代码。页面多了构建慢时用 MPA_FILTER。在项目.env里配置MPA_FILTERbar,foo开发时只会启动列出的这几个页面其余页面不打包。最后提醒MPA 模式下路由类插件、约定式路由等能力基本用不上把它当带 MPA 约定的构建工具来预期就不会有太多落差。完整配置项说明见 MPA 模式官方文档可运行示例在 examples/mpa/。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考