Question

因此，我正在使用带有“基准”布局的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页面的内容并且将其复制到页面中也无法使用。我真的不明白。而且我的调试控制台中没有错误：-（

是否有人受到启发？或者是一个更深入地分析问题的过程。

非常感谢

Answer 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-您需要使用与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在预渲染后不会消失。

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

Answer 2

当我发现Groxan's answer时，我几乎要转向完整的SSR。顺便说一句，在我的情况下，也可以将id="app"设置为<v-app>标记（而不是用另一个div包装）。

Vuetify + prerender-spa-plugin

2 个答案:

TL; DR

为什么？