使用 prerender-spa-plugin 时如何加载 Vuetify? [英] How to load Vuetify when using the prerender-spa-plugin?

问题描述

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

When we run our Vuetify application in development mode using npm run dev, it works properly.

然而，当我们使用 prerender-spa-plugin 构建它时，Vuetify CSS 文件可以正确加载，但没有任何 JavaScript 组件工作(即单击按钮打开抽屉不起作用等等.).

However, when we build it using the prerender-spa-plugin, the Vuetify CSS files load properly, but none of the JavaScript components work (i.e. clicking buttons to open the drawer doesn't work etc.).

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

We've tried hardcoding a script tag to Vuetify's CDN but that hasn't worked.

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

We've searched on GitHub for projects that use Vuetify and prerender-spa-plugin, but were not able to notice any difference between our code and other people's code.

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

We've tried to play with the settings of the Renderer() to troubleshoot the bug, but could not identify the root cause of the issue.

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
    })
})
)

ma​​in.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'))
  }
})

推荐答案

不幸的是，添加 data-server-rendered="true" 没有帮助，但我找到了解决该问题的方法就我而言:https://stackoverflow.com/a/61774969/9801398

Unfortunately, adding data-server-rendered="true" didn't help, but I found the way to solve that problem in my case: https://stackoverflow.com/a/61774969/9801398

这篇关于使用 prerender-spa-plugin 时如何加载 Vuetify?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！