vue预渲染在根目录的可见 prerender-spa-plugin , 这里写的是打包后文件放到子目录的情况

.env

VUE_APP_publicPath = "/"

.env.production

VUE_APP_publicPath = "/pages/"

router.ts

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

vue.config.js

const isProduction = process.env.NODE_ENV === "production";
const publicPath = process.env.VUE_APP_publicPath;
// eslint-disable-next-line @typescript-eslint/no-var-requires
const PrerenderSPAPlugin = require("prerender-spa-plugin");
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require("path");
module.exports = {
    publicPath: publicPath,
    outputDir: "dist" + publicPath,
    productionSourceMap: false,
    configureWebpack: (config) => {
        if (isProduction) {
            const plugins = [];
            plugins.push(
                new PrerenderSPAPlugin({
                    staticDir: path.join(__dirname, "dist"),
                    indexPath: path.join(__dirname, "dist" + publicPath + "index.html"),
                    routes: ["/original-painting", "/python/online", "/python/data-analysis", "/welfare"],
                    renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
                        // 是否要开启debug模式，默认不开启
                        // headless: true,
                        // 视图组件是在API请求获取所有必要数据后呈现的，因此我们在dom中存在“data view”属性后创建页面快照
                        renderAfterDocumentEvent: "render-event",
                    }),
                })
            );
            config.plugins = [...config.plugins, ...plugins];
        }
    },
};