Vuetify + prerender-spa-plugin

问题描述 投票：1回答：1

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

如果有人受到启发？或一个对问题进行更深入分析的过程。

非常感谢

vuejs2 vuetify.js prerender
1个回答
0
投票

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">
        <router-view />
    </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在预渲染后不会消失。

这是我一生中四个小时的浪费方式...

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.