CINXE.COM

<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>SSR | Mpx 框架</title> <meta name="description" content="A VitePress site"> <meta name="generator" content="VitePress v1.6.3"> <link rel="preload stylesheet" href="/assets/style.D9lwO_cj.css" as="style"> <link rel="preload stylesheet" href="/vp-icons.css" as="style"> <script type="module" src="/assets/app.BTrdtP6E.js"></script> <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="modulepreload" href="/assets/chunks/theme.BtY8jpWz.js"> <link rel="modulepreload" href="/assets/chunks/framework.BRjwFPxv.js"> <link rel="modulepreload" href="/assets/guide_advance_ssr.md.Dighccx3.lean.js"> <link rel="icon" href="/favicon.ico"> <link rel="manifest" href="/manifest.webmanifest"> <script type="text/javascript">(function(e,r,t,i,a,n,s){e[t]=e[t]||function(){(e[t].q=e[t].q||[]).push(arguments)},n=r.createElement(i),n.async=1,n.src="https://www.clarity.ms/tag/"+a,s=r.getElementsByTagName(i)[0],s.parentNode.insertBefore(n,s)})(window,document,"clarity","script","jtvvy52wxy");</script> <meta name="author" content="Mpx 框架"> <meta property="og:type" content="website"> <meta name="og:title" content="Mpx 框架"> <meta name="og:description" content="深度性能优化的增强型小程序开发框架"> <meta property="og:image" content="https://mpxjs.cn/logo.png"> <meta property="og:url" content="https://mpxjs.cn/"> <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script> <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script> <link rel="manifest" href="/manifest.webmanifest"> </head> <body> <div id="app"><div class="container"><div><div class="Layout" data-v-5d98c3a5><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><img class="VPImage logo" src="/favicon.ico" alt data-v-8426fc1a><span data-v-1168a8e4>Mpx 框架</span></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><div class="VPNavBarSearch search" data-v-6aa21345><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><a class="VPLink link VPNavBarMenuLink active" href="/guide/basic/start.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><span data-v-e56f3d57>指南</span></a><a class="VPLink link VPNavBarMenuLink" href="/api/" tabindex="0" data-v-dc692963 data-v-e56f3d57><span data-v-e56f3d57>API</span></a><a class="VPLink link VPNavBarMenuLink" href="/articles/" tabindex="0" data-v-dc692963 data-v-e56f3d57><span data-v-e56f3d57>文章</span></a><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/didi/mpx/releases" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57><span data-v-e56f3d57>更新记录</span></a></nav><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><a class="VPSocialLink no-icon" href="https://github.com/didi/mpx" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>外观</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><a class="VPSocialLink no-icon" href="https://github.com/didi/mpx" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a></div></div></div></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>菜单</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>返回顶部</button></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>基础</h2></div><div class="items" data-v-b3fd67f8><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/start.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>快速开始</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/intro.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>介绍</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/single-file.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>单文件开发</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/ide.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>IDE 高亮配置</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/template.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>模板语法</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/css.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>CSS 处理</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/reactive.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>数据响应</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/class-style-binding.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>类名样式绑定</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/conditional-render.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>条件渲染</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/list-render.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>列表渲染</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/event.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>事件处理</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/two-way-binding.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>双向绑定</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/component.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>自定义组件</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/refs.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>获取组件实例/节点信息</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/basic/option-chain.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>模版内可选链表达式</p></a></div></div></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>进阶</h2></div><div class="items" data-v-b3fd67f8><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/store.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>状态管理（store）</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/pinia.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>状态管理（pinia）</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/mixin.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>使用 mixin</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/npm.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>使用 npm</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/subpackage.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>使用分包</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/async-subpackage.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>分包异步化</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/platform.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>跨平台</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/i18n.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>国际化 i18n</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/size-report.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>包体积分析</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/image-process.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>图像资源处理</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/progressive.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>原生渐进迁移</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/ability-compatible.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>原生能力兼容</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/plugin.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>小程序插件</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/custom-output-path.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>自定义路径</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/utility-first-css.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>使用原子类</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/ssr.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>SSR</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/provide-inject.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>依赖注入（Provide/Inject）</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advance/build-config.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>编译配置</p></a></div></div></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>跨端</h2></div><div class="items" data-v-b3fd67f8><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/platform/basic.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>跨端输出基础</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/platform/rn.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>跨端输出 RN</p></a></div></div></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>组合式 API</h2></div><div class="items" data-v-b3fd67f8><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/composition-api/composition-api.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>组合式 API</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/composition-api/reactive-api.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>响应式 API</p></a></div></div></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>工具</h2></div><div class="items" data-v-b3fd67f8><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/tool/ts.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>使用TypeScript开发小程序</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/tool/unit-test.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>单元测试</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/tool/e2e-test.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>E2E自动化测试</p></a></div></div></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>拓展</h2></div><div class="items" data-v-b3fd67f8><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/extend/fetch.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>网络请求</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/extend/api-proxy.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>API 转换</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/extend/mock.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>数据 Mock</p></a></div></div></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>理解</h2></div><div class="items" data-v-b3fd67f8><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/understand/runtime.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>Mpx运行时增强原理</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/understand/compile.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>Mpx编译构建原理</p></a></div></div></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>迁移</h2></div><div class="items" data-v-b3fd67f8><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/migrate/2.9.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>从 2.8 升级至 2.9</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/migrate/2.8.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>从 2.7 升级至 2.8</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/migrate/2.7.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>从旧版本迁移至 2.7</p></a></div></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/migrate/mpx-cli-3.html" data-v-b3fd67f8><p class="text" data-v-b3fd67f8>mpx-cli v2 迁移到 v3</p></a></div></div></div></section></div></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>本页目录</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997></ul></div></nav><div class="spacer" data-v-3f215769></div></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _guide_advance_ssr" data-v-39a288b8><div><h1 id="ssr" tabindex="-1">SSR <a class="header-anchor" href="#ssr" aria-label="Permalink to "SSR""></a></h1><p>近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，但过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 2.9 版本中，我们对 Mpx 输出 web 流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整支持了基于 Vue 和 Pinia 的 SSR 技术方案。</p><h2 id="配置使用-ssr" tabindex="-1">配置使用 SSR <a class="header-anchor" href="#配置使用-ssr" aria-label="Permalink to "配置使用 SSR""></a></h2><p>在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。</p><p><img src="https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85" alt="Vue SSR流程"></p><p>Mpx SSR 核心基于 Vue SSR 实现，大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：</p><h3 id="构建server-client-bundle" tabindex="-1">构建server/client bundle <a class="header-anchor" href="#构建server-client-bundle" aria-label="Permalink to "构建server/client bundle""></a></h3><p>SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。在 Vue 中，我们需要提供 <code>entry-server.js</code> 和 <code>entry-client.js</code> 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 <code>app.mpx</code> 作为统一构建入口，无需区分 server 和 client。</p><h4 id="服务端构建配置" tabindex="-1">服务端构建配置 <a class="header-anchor" href="#服务端构建配置" aria-label="Permalink to "服务端构建配置""></a></h4><p>服务端配置中除了将 entry 制定为 <code>app.mpx</code> 及其它基础配置外，最重要的是安装 <code>vue-server-renderer</code> 包中提供的 <code>server-plugin</code> 插件，该插件能够构建产出 <code>vue-ssr-server-bundle.json</code> 文件供 <code>renderer</code> 后续消费。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// webpack.server.config.js</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> VueSSRServerPlugin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'vue-server-renderer/server-plugin'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> merge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(baseConfig, {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 将 entry 指向项目的 app.mpx 文件</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> entry: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./app.mpx'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 产出 `vue-ssr-server-bundle.json`</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> VueSSRServerPlugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#server-config" target="_blank" rel="noreferrer">Vue SSR的服务端配置</a></p><h4 id="客户端构建配置" tabindex="-1">客户端构建配置 <a class="header-anchor" href="#客户端构建配置" aria-label="Permalink to "客户端构建配置""></a></h4><p>类似服务端构建配置，在客户端构建中我们需要使用 <code>vue-server-renderer</code> 包中 <code>client-plugin</code> 插件来帮助我们生成客户端环境的资源清单 <code>vue-ssr-client-manifest.json</code>，并供 <code>renderer</code> 后续消费。</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// webpack.client.config.js</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> VueSSRClientPlugin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'vue-server-renderer/client-plugin'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> merge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(baseConfig, {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 将 entry 指向项目的 app.mpx 文件</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> entry: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./app.mpx'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 产出 `vue-ssr-client-manifest.json`。</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> VueSSRClientPlugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#client-config" target="_blank" rel="noreferrer">Vue SSR的客户端配置</a></p><h3 id="准备页面模版" tabindex="-1">准备页面模版 <a class="header-anchor" href="#准备页面模版" aria-label="Permalink to "准备页面模版""></a></h3><p>SSR 渲染中，我们创建 <code>renderer</code> 需要一个页面模板，简单的示例如下：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"en"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> </span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 <code></code>注释，标记 SSR 渲染产物的插入位置，如使用 <code>@mpxjs/cli</code> 脚手架创建 SSR 项目，该模版已经内置于脚手架中。</p><h3 id="集成启动-ssr-服务" tabindex="-1">集成启动 SSR 服务 <a class="header-anchor" href="#集成启动-ssr-服务" aria-label="Permalink to "集成启动 SSR 服务""></a></h3><p>当我们准备好页面模版和双端构建产物后，我们就可以创建 <code>renderer</code> 并与 Node 服务进行集成，启动 SSR 服务，下面以 <code>express</code> 为例：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//server.js</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'express'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)()</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">createBundleRenderer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'vue-server-renderer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 通过 vue-server-renderer/server-plugin 生成的文件</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> serverBundle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'../dist/server/vue-ssr-server-bundle.json'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 通过 vue-server-renderer/client-plugin 生成的文件</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> clientManifest</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'../dist/client/vue-ssr-client-manifest.json'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 页面模版文件</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> template</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'fs'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readFileSync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'../src/index.template.html'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'utf-8'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 创建 renderer 渲染器</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> renderer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createBundleRenderer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(serverBundle, {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> runInNewContext: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> template,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> clientManifest,</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 注册启动 SSR 服务</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'*'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">req</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">res</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> context</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { url: req.url }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> renderer.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">renderToString</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(context, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">err</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (err) {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> res.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Internal Server Error'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> res.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(html);</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">listen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8080</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="ssr-生命周期" tabindex="-1">SSR 生命周期 <a class="header-anchor" href="#ssr-生命周期" aria-label="Permalink to "SSR 生命周期""></a></h2><p>在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是<code>onAppInit</code>、<code>serverPrefetch</code> 和 <code>onSSRAppCreated</code>，以统一服务端与客户端的构建入口，下面展开介绍：</p><h3 id="onappinit" tabindex="-1">onAppInit <a class="header-anchor" href="#onappinit" aria-label="Permalink to "onAppInit""></a></h3><blockquote><p>该生命周期仅可在 App 中使用</p></blockquote><p>在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，<code>onAppInit</code> 生命周期会在应用创建 <code>new Vue(...)</code> 前被调用，其执行的返回结果会被合并到创建应用的 <code>options</code> 中</p><p>很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 <code>@mpxjs/pinia</code> 作为全局状态管理工具，我们可以在 <code>onAppInit</code> 中返回全新的 <code>pinia</code> 示例避免产生跨请求状态污染，示例如下：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// app.mpx</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mpx, { createApp } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createPinia } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/pinia'</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onAppInit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pinia</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createPinia</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pinia</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><blockquote><p>SSR 中仅支持使用 <code>@mpxjs/pinia</code> 作为状态管理工具，<code>@mpxjs/store</code> 暂不支持</p></blockquote><h3 id="serverprefetch" tabindex="-1">serverPrefetch <a class="header-anchor" href="#serverprefetch" aria-label="Permalink to "serverPrefetch""></a></h3><blockquote><p>该生命周期可在 App/Page/Component 中使用，只在服务端渲染时执行</p></blockquote><p>当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：</p><p>选项式 API：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createPage } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useStore </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '../store/index'</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> //...</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> serverPrefetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> query</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.$route.query</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> store</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.$pinia)</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // return the promise from the action, fetch data and update state</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fetchData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(query)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>组合式 API：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { onServerPrefetch, getCurrentInstance, createPage } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@mpxjs/core'</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useStore </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '../store/index'</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> store</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> userStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onServerPrefetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> query</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getCurrentInstance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().proxy.$route.query</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // return the promise from the action, fetch data and update state</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fetchData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(query)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>关于数据预拉取更详细的说明可以查看<a href="https://v2.ssr.vuejs.org/guide/data.html" target="_blank" rel="noreferrer">这里</a>。</p><h3 id="onssrappcreated" tabindex="-1">onSSRAppCreated <a class="header-anchor" href="#onssrappcreated" aria-label="Permalink to "onSSRAppCreated""></a></h3><blockquote><p>该生命周期仅可在 App 中使用，只在服务端渲染时执行</p></blockquote><p>在 Vue SSR 项目中，我们会在 <code>entry-server.js</code> 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 <code>app</code>。</p><p>在 Mpx SSR 中，我们将这部分逻辑整合在 <code>onSSRAppCreated</code> 中执行，该生命周期执行时用户可以从参数中获取应用实例 <code>app</code>、路由实例 <code>router</code>、数据管理实例 <code>pinia</code> 和 SSR 上下文 <code>context</code>，在完成必要的操作后，该生命周期需要返回一个 <code>resolve(app)</code> 的 promise。</p><p>通常我们会在 <code>onSSRAppCreated</code> 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// app.mpx</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...,</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onSSRAppCreated</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">pinia</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">context</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 设置服务端路由路径</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(context.url)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onReady</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 应用完成渲染时执行</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> context.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">rendered</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 将服务端渲染后得到的 pinia.state 同步到 context.state 中，</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 注入到 HTML 中，并在客户端运行时再读取同步</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> context.state </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pinia.state.value</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 返回应用程序实例</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, reject)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>上述示例代码等价于 Vue 中的 <code>entry-server.js</code></p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// entry-server.js</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createApp } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './app'</span></span> <span class="line"></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> context</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">store</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(context.url)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onReady</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // This `rendered` hook is called when the app has finished rendering</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> context.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">rendered</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // After the app is rendered, our store is now</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // filled with the state from our components.</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // When we attach the state to the context, and the `template` option</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // is used for the renderer, the state will automatically be</span></span> <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // serialized and injected into the HTML as `window.__INITIAL_STATE__`.</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> context.state </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store.state</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span> <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, reject)</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span> <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。</p><h2 id="其他注意事项" tabindex="-1">其他注意事项 <a class="header-anchor" href="#其他注意事项" aria-label="Permalink to "其他注意事项""></a></h2><ol><li><p>Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。</p></li><li><p>在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。</p></li><li><p>由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 <code>mpx.config.webRouteConfig</code> 将路由模式设置成 <code>history</code> 模式。</p></li></ol></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><div class="edit-info" data-v-e257564d><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新于: <time datetime="2024-08-13T12:42:48.000Z" data-v-e98dd255></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/guide/advance/utility-first-css.html" data-v-e257564d><span class="desc" data-v-e257564d>上一页</span><span class="title" data-v-e257564d>使用原子类</span></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/guide/advance/provide-inject.html" data-v-e257564d><span class="desc" data-v-e257564d>下一页</span><span class="title" data-v-e257564d>依赖注入（Provide/Inject）</span></a></div></nav></footer></div></div></div></div></div></div></div></div></div> <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_app-config.md\":\"8yUvMnrA\",\"api_builtin.md\":\"zC7lHwxi\",\"api_compile.md\":\"CEVfr7XI\",\"api_composition-api.md\":\"Clk-dbRQ\",\"api_directives.md\":\"Iz0_eRUW\",\"api_extend.md\":\"COshM7be\",\"api_global-api.md\":\"DekFw7fO\",\"api_index.md\":\"DPy5cwYH\",\"api_instance-api.md\":\"D7wqBPPP\",\"api_optional-api.md\":\"C9RjUBcS\",\"api_reactivity-api.md\":\"Br0_H2qt\",\"api_store-api.md\":\"D58j1Loq\",\"articles_1.0.md\":\"CX3uMEvE\",\"articles_2.0.md\":\"BiE2-Btj\",\"articles_2.7-release.md\":\"CtxTlBaz\",\"articles_2.8-release-alter.md\":\"O870wUeV\",\"articles_2.8-release.md\":\"DUJxybJv\",\"articles_2.9-release-alter.md\":\"B0zILKuf\",\"articles_2.9-release.md\":\"-fAvpoEu\",\"articles_index.md\":\"PgSaR_s8\",\"articles_mpx-cli-next.md\":\"DLApcxVv\",\"articles_mpx-cube-ui.md\":\"DPiau_2k\",\"articles_mpx1.md\":\"CPF70K1U\",\"articles_mpx2.md\":\"ChNa77kM\",\"articles_performance.md\":\"BF8yiIIl\",\"articles_size-control.md\":\"DH0nqEH7\",\"articles_ts-derivation.md\":\"Y2VtWgAq\",\"articles_unit-test.md\":\"D45q9SRT\",\"desc.md\":\"CEhPt_Er\",\"guide_advance_ability-compatible.md\":\"DUUqlGU1\",\"guide_advance_async-subpackage.md\":\"YdRmCpxD\",\"guide_advance_build-config.md\":\"CK_KSb3r\",\"guide_advance_custom-output-path.md\":\"CcDbiRF1\",\"guide_advance_dll-plugin.md\":\"CtchVSg7\",\"guide_advance_i18n.md\":\"D7eAH4JX\",\"guide_advance_image-process.md\":\"R7ATnHM_\",\"guide_advance_mixin.md\":\"BA5vitiz\",\"guide_advance_npm.md\":\"Cel872y9\",\"guide_advance_pinia.md\":\"D3A9y0Gw\",\"guide_advance_platform.md\":\"C-a6y7Wp\",\"guide_advance_plugin.md\":\"EgOm6-ei\",\"guide_advance_progressive.md\":\"DJ7EwCPw\",\"guide_advance_provide-inject.md\":\"FHPTn5Pf\",\"guide_advance_resource-resolve.md\":\"CQ0_dCIQ\",\"guide_advance_size-report.md\":\"DsRaf5lZ\",\"guide_advance_ssr.md\":\"Dighccx3\",\"guide_advance_store.md\":\"RxkbMHcD\",\"guide_advance_subpackage.md\":\"BO3rQ_SJ\",\"guide_advance_utility-first-css.md\":\"DRTXuxCL\",\"guide_basic_class-style-binding.md\":\"CHjIhjm9\",\"guide_basic_component.md\":\"BVlz4Z0G\",\"guide_basic_conditional-render.md\":\"CqWMRF4_\",\"guide_basic_css.md\":\"CMhUuiRO\",\"guide_basic_event.md\":\"CJro7QhD\",\"guide_basic_ide.md\":\"J6p9ySwr\",\"guide_basic_intro.md\":\"BQ5nSHat\",\"guide_basic_list-render.md\":\"DJ0nmxdg\",\"guide_basic_option-chain.md\":\"1crAkqm-\",\"guide_basic_reactive.md\":\"ZEZ7uVds\",\"guide_basic_refs.md\":\"BlYk9tcG\",\"guide_basic_single-file.md\":\"pOorh032\",\"guide_basic_start.md\":\"CBAczrxY\",\"guide_basic_template.md\":\"Bcxqv41D\",\"guide_basic_two-way-binding.md\":\"B_KA2k94\",\"guide_composition-api_composition-api.md\":\"Bh8pACFE\",\"guide_composition-api_reactive-api.md\":\"WOHtEb5G\",\"guide_extend_api-proxy.md\":\"CKVZi01O\",\"guide_extend_fetch.md\":\"DoVBrdcs\",\"guide_extend_index.md\":\"B-AnIYDs\",\"guide_extend_mock.md\":\"CfZHEPBA\",\"guide_migrate_2.7.md\":\"BRNs6PtI\",\"guide_migrate_2.8.md\":\"DUgpXI5-\",\"guide_migrate_2.9.md\":\"DZXr1Vtv\",\"guide_migrate_mpx-cli-3.md\":\"BlX0YUtQ\",\"guide_platform_basic.md\":\"WikgVNAd\",\"guide_platform_miniprogram.md\":\"X8yJCeEN\",\"guide_platform_rn.md\":\"DsXthOYo\",\"guide_platform_web.md\":\"CcHiVFzp\",\"guide_tool_e2e-test.md\":\"EMUVz3nW\",\"guide_tool_ts.md\":\"CH10H8U-\",\"guide_tool_unit-test.md\":\"BNWMp2Lt\",\"guide_understand_compile.md\":\"DS5TaIwp\",\"guide_understand_runtime.md\":\"Cc3uol1G\",\"index.md\":\"CGEi3GTg\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Mpx 框架\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"displayDetails\":\"显示详细列表\",\"resetButtonTitle\":\"重置搜索\",\"backButtonTitle\":\"关闭搜索\",\"noResultsText\":\"没有结果\",\"footer\":{\"selectText\":\"选择\",\"selectKeyAriaLabel\":\"输入\",\"navigateText\":\"导航\",\"navigateUpKeyAriaLabel\":\"上箭头\",\"navigateDownKeyAriaLabel\":\"下箭头\",\"closeText\":\"关闭\",\"closeKeyAriaLabel\":\"esc\"}}}}},\"logo\":\"/favicon.ico\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/didi/mpx\"}],\"nav\":[{\"text\":\"指南\",\"activeMatch\":\"^/guide/\",\"link\":\"/guide/basic/start\"},{\"text\":\"API\",\"activeMatch\":\"^/api/\",\"link\":\"/api/\"},{\"text\":\"文章\",\"activeMatch\":\"^/articles/\",\"link\":\"/articles/\"},{\"text\":\"更新记录\",\"activeMatch\":\"^/releases/\",\"link\":\"https://github.com/didi/mpx/releases\",\"target\":\"_blank\"}],\"outline\":{\"level\":[2,3],\"label\":\"本页目录\"},\"sidebar\":{\"/guide/\":[{\"text\":\"基础\",\"collapsable\":false,\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/basic/start\"},{\"text\":\"介绍\",\"link\":\"/guide/basic/intro\"},{\"text\":\"单文件开发\",\"link\":\"/guide/basic/single-file\"},{\"text\":\"IDE 高亮配置\",\"link\":\"/guide/basic/ide\"},{\"text\":\"模板语法\",\"link\":\"/guide/basic/template\"},{\"text\":\"CSS 处理\",\"link\":\"/guide/basic/css\"},{\"text\":\"数据响应\",\"link\":\"/guide/basic/reactive\"},{\"text\":\"类名样式绑定\",\"link\":\"/guide/basic/class-style-binding\"},{\"text\":\"条件渲染\",\"link\":\"/guide/basic/conditional-render\"},{\"text\":\"列表渲染\",\"link\":\"/guide/basic/list-render\"},{\"text\":\"事件处理\",\"link\":\"/guide/basic/event\"},{\"text\":\"双向绑定\",\"link\":\"/guide/basic/two-way-binding\"},{\"text\":\"自定义组件\",\"link\":\"/guide/basic/component\"},{\"text\":\"获取组件实例/节点信息\",\"link\":\"/guide/basic/refs\"},{\"text\":\"模版内可选链表达式\",\"link\":\"/guide/basic/option-chain\"}]},{\"text\":\"进阶\",\"collapsable\":false,\"items\":[{\"text\":\"状态管理（store）\",\"link\":\"/guide/advance/store\"},{\"text\":\"状态管理（pinia）\",\"link\":\"/guide/advance/pinia\"},{\"text\":\"使用 mixin\",\"link\":\"/guide/advance/mixin\"},{\"text\":\"使用 npm\",\"link\":\"/guide/advance/npm\"},{\"text\":\"使用分包\",\"link\":\"/guide/advance/subpackage\"},{\"text\":\"分包异步化\",\"link\":\"/guide/advance/async-subpackage\"},{\"text\":\"跨平台\",\"link\":\"/guide/advance/platform\"},{\"text\":\"国际化 i18n\",\"link\":\"/guide/advance/i18n\"},{\"text\":\"包体积分析\",\"link\":\"/guide/advance/size-report\"},{\"text\":\"图像资源处理\",\"link\":\"/guide/advance/image-process\"},{\"text\":\"原生渐进迁移\",\"link\":\"/guide/advance/progressive\"},{\"text\":\"原生能力兼容\",\"link\":\"/guide/advance/ability-compatible\"},{\"text\":\"小程序插件\",\"link\":\"/guide/advance/plugin\"},{\"text\":\"自定义路径\",\"link\":\"/guide/advance/custom-output-path\"},{\"text\":\"使用原子类\",\"link\":\"/guide/advance/utility-first-css\"},{\"text\":\"SSR\",\"link\":\"/guide/advance/ssr\"},{\"text\":\"依赖注入（Provide/Inject）\",\"link\":\"/guide/advance/provide-inject\"},{\"text\":\"编译配置\",\"link\":\"/guide/advance/build-config\"}]},{\"text\":\"跨端\",\"collapsable\":false,\"items\":[{\"text\":\"跨端输出基础\",\"link\":\"/guide/platform/basic\"},{\"text\":\"跨端输出 RN\",\"link\":\"/guide/platform/rn\"}]},{\"text\":\"组合式 API\",\"collapsable\":false,\"items\":[{\"text\":\"组合式 API\",\"link\":\"/guide/composition-api/composition-api\"},{\"text\":\"响应式 API\",\"link\":\"/guide/composition-api/reactive-api\"}]},{\"text\":\"工具\",\"collapsable\":false,\"items\":[{\"text\":\"使用TypeScript开发小程序\",\"link\":\"/guide/tool/ts\"},{\"text\":\"单元测试\",\"link\":\"/guide/tool/unit-test\"},{\"text\":\"E2E自动化测试\",\"link\":\"/guide/tool/e2e-test\"}]},{\"text\":\"拓展\",\"collapsable\":false,\"items\":[{\"text\":\"网络请求\",\"link\":\"/guide/extend/fetch\"},{\"text\":\"API 转换\",\"link\":\"/guide/extend/api-proxy\"},{\"text\":\"数据 Mock\",\"link\":\"/guide/extend/mock\"}]},{\"text\":\"理解\",\"collapsable\":false,\"items\":[{\"text\":\"Mpx运行时增强原理\",\"link\":\"/guide/understand/runtime\"},{\"text\":\"Mpx编译构建原理\",\"link\":\"/guide/understand/compile\"}]},{\"text\":\"迁移\",\"collapsable\":false,\"items\":[{\"text\":\"从 2.8 升级至 2.9\",\"link\":\"/guide/migrate/2.9\"},{\"text\":\"从 2.7 升级至 2.8\",\"link\":\"/guide/migrate/2.8\"},{\"text\":\"从旧版本迁移至 2.7\",\"link\":\"/guide/migrate/2.7\"},{\"text\":\"mpx-cli v2 迁移到 v3\",\"link\":\"/guide/migrate/mpx-cli-3\"}]}],\"/api/\":[{\"text\":\"API\",\"collapsable\":false,\"items\":[{\"text\":\"API 参考\",\"link\":\"/api/\"},{\"text\":\"全局配置\",\"link\":\"/api/app-config\"},{\"text\":\"全局 API\",\"link\":\"/api/global-api\"},{\"text\":\"实例 API\",\"link\":\"/api/instance-api\"},{\"text\":\"Store API\",\"link\":\"/api/store-api\"},{\"text\":\"模板指令\",\"link\":\"/api/directives\"},{\"text\":\"编译构建\",\"link\":\"/api/compile\"},{\"text\":\"内建组件\",\"link\":\"/api/builtIn\"},{\"text\":\"响应式 API\",\"link\":\"/api/reactivity-api\"},{\"text\":\"组合式 API\",\"link\":\"/api/composition-api\"},{\"text\":\"选项式 API\",\"link\":\"/api/optional-api\"},{\"text\":\"周边拓展\",\"link\":\"/api/extend\"}]}],\"/articles/\":[{\"text\":\"文章\",\"collapsable\":false,\"items\":[{\"text\":\"滴滴开源小程序框架Mpx\",\"link\":\"/articles/1.0\"},{\"text\":\"Mpx 发布2.0，完美支持跨平台开发\",\"link\":\"/articles/2.0\"},{\"text\":\"小程序框架运行时性能大测评\",\"link\":\"/articles/performance\"},{\"text\":\"小程序开发者，为什么你应该尝试下MPX\",\"link\":\"/articles/mpx1\"},{\"text\":\"Mpx 小程序框架技术揭秘\",\"link\":\"/articles/mpx2\"},{\"text\":\"滴滴出行小程序体积优化实践\",\"link\":\"/articles/size-control\"},{\"text\":\"使用Typescript新特性Template Literal Types完善链式key的类型推导\",\"link\":\"/articles/ts-derivation\"},{\"text\":\"Mpx2.7 版本正式发布，大幅提升编译构建速度\",\"link\":\"/articles/2.7-release\"},{\"text\":\"Mpx2.8 版本正式发布，使用组合式 API 开发小程序\",\"link\":\"/articles/2.8-release\"},{\"text\":\"Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化\",\"link\":\"/articles/2.9-release\"},{\"text\":\"小程序跨端组件库 Mpx-cube-ui 开源啦\",\"link\":\"/articles/mpx-cube-ui\"},{\"text\":\"@mpxjs/cli 插件化改造\",\"link\":\"/articles/mpx-cli-next\"},{\"text\":\"Mpx 小程序单元测试能力建设与实践\",\"link\":\"/articles/unit-test\"}]}]},\"darkModeSwitchLabel\":\"外观\",\"sidebarMenuLabel\":\"菜单\",\"returnToTopLabel\":\"返回顶部\",\"langMenuLabel\":\"语言\",\"notFound\":{\"title\":\"页面未找到\",\"linkText\":\"返回首页\",\"quote\":\"😩 抱歉，迷路了～\"},\"lastUpdated\":{\"text\":\"最后更新于\",\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"short\"}},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"}},\"locales\":{\"/\":{\"label\":\"中文\",\"lang\":\"zh-CN\",\"title\":\"Mpx 框架\",\"description\":\"深度性能优化的增强型小程序开发框架\"}},\"scrollOffset\":134,\"cleanUrls\":false}");</script> </body> </html>