Merge pull request #2154 from didi/fix-ssr-import-components-error

feat: 新增useSSR配置,规避ssr模式下异步分包hydrate报错问题

Author: hiyuki

docs-vitepress/api/compile.md

@@ -824,8 +824,13 @@ module.exports = defineConfig({
 
 transRpxFn 配置用于自定义输出 web 时对于 rpx 样式单位的转换逻辑，常见的方式有转换为 vw 或转换为 rem
 
+`{useSSR: boolean}`
+
+useSSR 默认值为 `false`，当 SSR 模式下使用异步分包时，需要将 useSSR 设置为 `true`, 其他场景不需要。
+
+
 ```js
-// vue.config.js
+// mpx.config.js
 module.exports = defineConfig({
   pluginOptions: {
     mpx: {
@@ -834,7 +839,9 @@ module.exports = defineConfig({
           transRpxFn: function (match, $1) {
             if ($1 === '0') return $1
             return `${$1 * +(100 / 750).toFixed(8)}vw`
-          }
+          },
+          // 当 SSR 模式下使用异步分包时
+          useSSR: true
         }
       }
     }

packages/webpack-plugin/lib/runtime/optionProcessor.js

@@ -352,7 +352,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
   return extend({ app }, option)
 }
 
-export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, el }) {
+export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, el, useSSR }) {
   if (!isBrowser) {
     return context => {
       const { app, router, pinia = {} } = createApp({
@@ -379,7 +379,7 @@ export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue
       }
     }
   } else {
-    const { app, pinia } = createApp({
+    const { app, pinia, router } = createApp({
       App,
       componentsMap,
       Vue,
@@ -391,6 +391,14 @@ export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue
     if (window.__INITIAL_STATE__ && pinia) {
       pinia.state.value = window.__INITIAL_STATE__
     }
-    app.$mount(el)
+    if (useSSR) {
+      // https://v3.router.vuejs.org/api/#router-onready
+      // ssr 场景如果使用了异步组件，需要在 onReady 回调中挂载，否则 hydrate 可能会报错
+      router.onReady(() => {
+        app.$mount(el)
+      })
+    } else {
+      app.$mount(el)
+    }
   }
 }

packages/webpack-plugin/lib/web/processMainScript.js

@@ -71,7 +71,8 @@ export default processAppOption({
   componentsMap: ${shallowStringify(componentsMap)},
   Vue: Vue,
   VueRouter: VueRouter,
-  el: ${JSON.stringify(webConfig.el || '#app')}
+  el: ${JSON.stringify(webConfig.el || '#app')},
+  useSSR: ${JSON.stringify(!!webConfig.useSSR)}
 })\n`
 
   callback(null, {