Когда мы запускаем наше приложение Vuetify в режиме разработки, используя npm run dev
, оно работает правильно.
Однако, когда мы собираем его с использованием prerender-spa-plugin
, CSS-файлы Vuetify загружаются правильно, но ни один из компонентов JavaScript не работает (т.е. нажатие кнопок для открытия ящика не работает и т. Д.).
Мы пытались жестко закодировать тег сценария в CDN Vuetify, но это не сработало.
Мы искали на 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'))
}
})