使用 prerender-spa-plugin 时如何加载 Vuetify？答案

【问题标题】：How to load Vuetify when using the prerender-spa-plugin?使用 prerender-spa-plugin 时如何加载 Vuetify？
【发布时间】：2019-06-07 01:27:05
【问题描述】：

当我们使用 npm run dev 在开发模式下运行我们的 Vuetify 应用程序时，它可以正常工作。

但是，当我们使用 prerender-spa-plugin 构建它时，Vuetify CSS 文件可以正确加载，但所有 JavaScript 组件都不起作用（即单击按钮打开抽屉不起作用等）。

我们尝试将脚本标签硬编码到 Vuetify 的 CDN，但没有奏效。

我们在 GitHub 上搜索了使用 Vuetify 和 prerender-spa-plugin 的项目，但没有发现我们的代码与其他人的代码有任何区别。

我们尝试使用 Renderer() 的设置来解决错误，但无法确定问题的根本原因。

Webpack 配置设置：

webpackConfig.plugins.push(
new PrerenderSPAPlugin({
    // Required - The path to the webpack-outputted app to prerender.
    staticDir: path.join(__dirname, '..', 'dist'),

    // Required - Routes to render.
    routes: [ '/', '/about-us.html', '/act-now.html' ],

    postProcess (renderedRoute) {
    // Ignore any redirects.
    renderedRoute.route = renderedRoute.originalRoute
    // Basic whitespace removal. (Don't use this in production.)
    renderedRoute.html = renderedRoute.html.split(/>[\s]+</gmi).join('><')
    // Remove /index.html from the output path if the dir name ends with a .html file extension.
    // For example: /dist/dir/special.html/index.html -> /dist/dir/special.html
    if (renderedRoute.route.endsWith('.html')) {
        renderedRoute.outputPath = path.join(__dirname, '..', 'dist', renderedRoute.route)
    }

    return renderedRoute
    },

    renderer: new Renderer({
    renderAfterDocumentEvent: 'app.rendered',
    headless: false
    })
})
)

main.js

import '@babel/polyfill'
import 'core-js/es6/promise'
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import '@/plugins/vuetify'
import App from './App'
import router from './router'

import 'vuetify/dist/vuetify.min.css'
import '../static/css/ms-theme.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),

  mounted () {
    document.dispatchEvent(new Event('app.rendered'))
  }
})

【问题讨论】：

标签： vue.js single-page-application vuetify.js

【解决方案1】：

不幸的是，添加 data-server-rendered="true" 并没有帮助，但我找到了解决这个问题的方法：https://*.com/a/61774969/9801398

【讨论】：

【解决方案2】：

答案是将data-server-rendered="true" 设置为<v-app>。

【讨论】：