vite+vue3 ssg预渲染方案

海上彼尚2025-12-13 17:25

安装

安装依赖：

bash 复制代码

pnpm i @prerenderer/rollup-plugin prerenderer -D

基本依赖

javascript 复制代码

"vite": "^6.3.5"
"vue": "^3.5.13"

配置

javascript 复制代码

import { defineConfig } from 'vite'
import prerender from '@prerenderer/rollup-plugin';

export default defineConfig({
    plugins: [
        prerender({
            // 需要预渲染的路由页面
            routes: [
                '/',
                '/industry',
                '/product/list',
                '/news/list',
                '/tourism/list'
            ],
            renderer: '@prerenderer/renderer-puppeteer',
            rendererOptions: {
                maxConcurrentRoutes: 1,
                renderAfterTime: 500,
                headless: true,
                executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe' // 谷歌浏览器位置
            },
            postProcess(renderedRoute) {
                // 清理不必要的空白字符
                renderedRoute.html = renderedRoute.html.replace(/\s+/g, ' ').trim();
                return renderedRoute;
            }
        })
    ],
})

最后执行pnpm build即可。

用我这个方案基本不会踩坑。