使用 prerender-spa-plugin 时如何加载 Vuetify?

本文介绍了使用 prerender-spa-plugin 时如何加载 Vuetify?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我们使用 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
    })
})
)

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

时如何加载

使用 prerender-spa-plugin 时如何加载 Vuetify?

问题描述

推荐答案