vue3预渲染使用方式，prerender-spa-plugin插件预渲染失败导致原因

"vue": "^3.2.33" + webpack + "prerender-spa-plugin": "^3.4.0"

 

vue.config.js配置

// 预渲染配置

const path = require('path');

const PrerenderSPAPlugin = require('prerender-spa-plugin');

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

if (process.env.VUE_APP_ENV !== 'dev') {

  module.exports.configureWebpack.plugins = (

    module.exports.configureWebpack.plugins || []

  ).concat([

    new PrerenderSPAPlugin({

      staticDir: path.join(__dirname, 'dist'),

      routes: ['/home', '/productCoffee', '/productFruit'],   // 不能有'',  '/'

      renderer: new Renderer({

       　// renderAfterDocumentEvent: 'custom-render-trigger',

        // injectProperty: "__PRERENDER_INJECTED",

        inject: {

          // prerendered: true

        },

        headless: false,

        ignoreHTTPSErrors: true,

        maxConcurrentRoutes: 3,

        //当页面多的时候尽量给的大点，这是留给做预渲染打包的时间，不然很容易超时而报错

        renderAfterTime: 5000

      })

    })

  ])

}

 

路由配置

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
{
path: '/',
name: 'home',
redirect: '/home'    // 首页重置到home页，为预渲染重置到home
},

{
path: '/home',
component: HomeView
},

{
path: '/about',
name: 'about',
// 路由中不能用动态 import，但是经过测试，可以使用
component: () => import( '../views/AboutView.vue')
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router

 

注意事项

1、预渲染插件依赖谷歌无头浏览器，这个浏览器非常大，需将npm镜像到淘宝等源，或者采用cnpm下载

2、手动修改插件源码

node_modules/prerender-spa-plugin/es6/index.js  的第60行，改个单词

改成

compilerFS.mkdir(dir, opts, (err, made) => err === null ? resolve(made) : reject(err))

3、渲染路径不能有'',  '/'，不支持/product/coffee这种类似路由，这些路径都会影响包名

4、所有文件都必须可以请求到，如果seo添加一些谷歌浏览器爬虫识别文件，导致国内请求不到，会导致预渲染失败，预渲染是请求完毕所有路径才渲染，有文件请求不到会导致预渲染失败

5、需先手动清除谷歌浏览器缓存再打包，否则预渲染会读取上一次预渲染数据，导致预渲染不是最新的