Quasar prerender-spa-plugin 踩坑指南

不用quasar的,但是碰到 Unable to prerender all routes! 的可以试试

先讲正确的配置:

1.App.vue里面添加

mounted() {
    document.dispatchEvent(new Event('render-event'));//加载完发布这个事件
  }

添加位置如图

2.使用 @dreysolano/prerender-spa-plugin 而不是原版的prerender-spa-plugin

@dreysolano/prerender-spa-plugin - npm (npmjs.com)https://www.npmjs.com/package/@dreysolano/prerender-spa-plugin

原版有bug,详情见

[prerender-spa-plugin] Unable to prerender all routes! - Chrisvfritz/Prerender-Spa-Plugin (issueexplorer.com)https://issueexplorer.com/issue/chrisvfritz/prerender-spa-plugin/469

[prerender-spa-plugin]无法预渲染所有路线！将 webpack 升级到 v5+ 时 ·问题 #414 ·chrisvfritz/prerender-spa-plugin (github.com)https://github.com/chrisvfritz/prerender-spa-plugin/issues/4143.在quasar.config.js里面添加

//这3行添加在最顶上
const path = require('path')
const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

//下面这个添加到

module.exports = configure(function (ctx) {
//...
build:{
//添加下面这些
extendWebpack(cfg) {
        if (ctx.prod && ctx.mode.spa) { //仅在spa生产模式下使用
          cfg.plugins.push(
            new PrerenderSPAPlugin({
              staticDir: path.join(__dirname, 'dist/spa'),
              routes: ['/', '/about', '/contact'],
              renderer: new Renderer({
                inject: {
                  foo: 'bar'
                },
                headless: true,
                renderAfterDocumentEvent: 'render-event'//第一步加载完会触发这个事件,这里抓到这个就开始爬取页面
              })
            })
          );
        }
      }

}

}