vue.js - 使用 prerender-spa-plugin 时如何加载 Vuetify?
问题描述
当我们使用 以开发模式运行 Vuetify 应用程序时npm run dev
,它可以正常工作。
然而,当我们使用prerender-spa-plugin
.
我们尝试将脚本标签硬编码到 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'))
}
})
解决方案
不幸的是,添加data-server-rendered="true"
没有帮助,但我找到了解决这个问题的方法:https ://stackoverflow.com/a/61774969/9801398
推荐阅读
- php - 无法发布 /register.php
- macos - 如何强制 NSOutlineView 调用 outlineView:numberOfChildrenOfItem
- r - 用 R 中两个数据帧中的某些列填充列
- python - 创建python flask swagger的最简单方法是什么
- python - Python插入Json并使用pymongo更新mongodb
- deployment - 将 Nextjs 项目部署到 FTP
- c# - DbSet 不包含 SaveChanges 的定义
- intellij-idea - 类型参数“BreakBlock”不能直接实例化(Minecraft Spigot 插件)
- javascript - 数组 A [N] 包含自然数。求给定 K 的倍数的元素之和
- flutter - 将本地存储图像的路径传递给 social_share 插件