Vuetify + prerender-spa-plugin答案

【问题标题】：Vuetify + prerender-spa-pluginVuetify + prerender-spa-plugin
【发布时间】：2024-01-01 21:12:01
【问题描述】：

所以我使用带有“基线”布局的 vuetify（来自文档：https://vuetifyjs.com/en/examples/layouts/baseline）。我将一页设置为预渲染：

  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, 'dist'),
        // Required - Routes to render.
        routes: [ '/about' ],
      })
    ]
  }

生成的页面很好。我与 SPA 中的 html 内容进行了比较，结果是一样的。但是，当 Web 服务器使用它时，菜单不起作用。就像没有执行js来将事件附加到元素一样。

重点是，即使我获取了 spa 页面的内容并将其复制到一个不起作用的页面中。我真的不明白。而且我的调试控制台中没有错误:-(

如果有人受到启发？或者更深入地分析问题的过程。

非常感谢

【问题讨论】：

尝试将data-server-rendered="true" 添加到您的根应用程序元素中。见：github.com/chrisvfritz/prerender-spa-plugin#vuejs-notes

标签： vuejs2 vuetify.js prerender

【解决方案1】：

TL;DR

index.html 包含带有id="app" 的根元素：

<body>
    <div id="app"></div>
</body>

main.js 将您的 vuetify 应用安装到根元素中：

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

App.vue - 您需要使用与index.html 相同的id="app" 将您的应用程序包装在元素中：

<template>
    <div id="app" data-server-rendered="true">
        <v-app>
            ...
        </v-app>
    </div>
</template>

为什么？

当您通过调用 .$mount('#app') 将 Vue 应用安装到根元素中时，您实际上将根元素替换为您的应用。

因此在预渲染您的 index.html 之前看起来像：

<body>
    <div id="app"></div>
</body>

在预渲染之后：

<body>
    <div data-app="true" class="application theme--light">
        ...
    </div>
</body>

然后，当 JS 加载时，它无法挂载 Vue 应用程序，因为不再有 #app 元素，所以你看到页面看起来不错，但没有任何工作正常，因为 JS 并没有真正挂载。

因此，如果我们将应用包装在一个元素中，该元素与 index.html 中的根元素具有相同的 id，我们可以多次重新挂载 Vue 应用，因为根元素 <div id="app"> 被替换为 <div id="app"> ，所以#app 在预渲染后不会消失。

这就是我浪费生命 4 小时的方式......

【讨论】：

【解决方案2】：

当我找到Groxan's answer 时，我几乎要切换到完整的 SSR。顺便说一句，将id="app" 设置为<v-app> 标签（而不是用另一个div 包装它）也适用于我的情况。

【讨论】：

请不要添加“谢谢”作为答案。一旦你有足够的reputation，你将能够vote up questions and answers，你觉得有帮助。 - From Review
感谢您并指出。只是想通过我的回答来补充一下，如何简单地更改 id 也可以达到同样的效果。