Vuetify + prerender-spa-plugin
Posted
技术标签:
【中文标题】Vuetify + prerender-spa-plugin【英文标题】： 【发布时间】：2020-03-19 04:25:33 【问题描述】：所以我使用带有“基线”布局的 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
【参考方案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 时，我几乎要切换到完整的 s-s-r。顺便说一句，将id="app" 设置为<v-app> 标签（而不是用另一个div 包装它）也适用于我的情况。
【讨论】：
请不要添加“谢谢”作为答案。一旦你有足够的reputation，你将能够vote up questions and answers，你觉得有帮助。 - From Review 感谢您并指出。只是想通过我的回答来补充一下，如何简单地更改id 也可以达到同样的效果。以上是关于Vuetify + prerender-spa-plugin的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Laravel 的其他 Vue/Vuetify 组件中嵌入 Vue/Vuetify 组件？