所以我使用带有“基线”布局的 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内容对比了一下，是一样的。然而，当网络服务器使用它时，菜单不起作用。就像没有执行 js 来将事件附加到元素上一样。
关键是，即使我获取 spa 页面的内容并将其复制到页面中，它也不起作用。我真的不明白。我的调试控制台中没有错误:-(
如果有人受到启发？或者更深入地分析问题的过程。
非常感谢
最佳答案
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 - 您需要将您的应用程序包装在具有相同 id="app" 的元素中如index.html中所示:
<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 实际上没有安装。
因此，如果我们将应用程序包装在具有相同 id 的元素中作为 index.html 中的根元素我们可以多次重新挂载 Vue 应用程序，因为根元素 <div id="app">替换为 <div id="app"> ，所以#app预渲染后不会消失。
我就这样浪费了生命中的四个小时......
关于vuejs2 - Vuetify + 预渲染-spa-插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59005397/