vue3+vite 实现生成静态页面

开始之前，请允许我bala bala,主要相关文件太少，大部分都是vue2并且直接webpack，毕竟vite Ta用不了webpack呀。下面是我实现的过程。
早期工作，建立vue 项目，写几个页面，创建路由啥的，我就一笔带过,如下图所示

image.png

1.安装依赖

npm i vite-plugin-prerender -D

这个是插件的信息

https://www.npmjs.com/package/vite-plugin-prerender

2.配置信息
在vite.config.ts 配置

import vitePrerender from 'vite-plugin-prerender'
import path from 'path'

export default () => {
  return {
    plugins: [
      vitePrerender({
        // Required - The path to the vite-outputted app to prerender.
        staticDir: path.join(__dirname, 'dist'),
        // Required - Routes to render.
        routes: ['/', '/about', '/index','/contact'],
      }),
    ],
  }
}

3、路由配置要求
确保使用 createWebHistory 模式（需服务器支持 History 模式）：
默认情况下就是createWebHistory

import { createRouter, createWebHistory } from 'vue-router'
export default createRouter({
  history: createWebHistory(),
  routes: [...]
})

4、运行build,我的报了错误如下

image.png

没有其他办法，直接进入文件vite-plugin-prerender/dist/index.mjs里修改

const Prerenderer = require("@prerenderer/prerenderer");
const PuppeteerRenderer = require("@prerenderer/renderer-puppeteer");
const { minify } = require("html-minifier");
const mkdirp = require("mkdirp");

修改成

import Prerenderer from "@prerenderer/prerenderer";
import PuppeteerRenderer from "@prerenderer/renderer-puppeteer";
import { minify } from "html-minifier";
import mkdirp from "mkdirp";

5.接着运行 npm run build 。大功告成。

image.png