gpt4 book ai didi

vuejs2 - Vuetify + prerender-spa-plugin

转载 作者:行者123 更新时间:2023-12-04 10:58:35 28 4
gpt4 key购买 nike

所以我使用带有“基线”布局的 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 页面的内容并将其复制到页面中,它也不起作用。我真的不明白。而且我的调试控制台中没有错误:-(

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

非常感谢

最佳答案

TL; 博士
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时,由于没有 #app,无法挂载Vue应用程序元素了,所以你会看到页面看起来不错,但没有任何东西可以正常工作,因为 JS 并没有真正安装。

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

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

关于vuejs2 - Vuetify + prerender-spa-plugin,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59005397/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com