安装依赖

npm i prerender-spa-plugin

修改路由

注意事项：

1. 路由模式为history模式
2. 首页需重定向到home，因配置预渲染路径时需要

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    redirect: '/home'    // 首页重置到home页，为预渲染重置到home
  },
  {
    path: "/home",
    component: () => import( "@/views/home"),
  },
];

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

修改源码prerender-spa-plugin

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

改成(mkdirp改为mkdir)

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

配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = defineConfig({
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          // 预渲染配置
          new PrerenderSPAPlugin({
            //要求-给的WebPack-输出应用程序的路径预渲染。
            staticDir: path.join(__dirname, 'dist'),
            //必需，要渲染的路由。
            routes: ['/home', '/appDown', '/about'],
            //必须，要使用的实际渲染器，没有则不能预编译
            renderer: new Renderer({
              inject: {
                foo: 'bar'
              },
              headless: false, //渲染时显示浏览器窗口。对调试很有用。  
              //等待渲染，直到检测到指定元素。
              //例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
              renderAfterDocumentEvent: 'render-event',
              navigationParams: {
                timeout: 0
              }
            })
          })
        ],
      }
    }
  },
})

在main.js中映射

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const myPlugin = {
    install(app, options) {
        document.dispatchEvent(new Event('render-event'))
    }
}

createApp(App)
.use(router)
.use(myPlugin)
.mount('#app')