Vite+Vue3 React Seo预渲染插件

原理

预渲染原理基本上都是启动无头浏览器，加载页面路由并将结果保存为静态HTML文件，存在很多优点。

如果你还在翻遍百度查找关于vite+vue3和react的预渲染，看这篇就够了。写一个完全符合自己需求的预渲染插件。

1.在项目安装无头浏览器，npm add puppeteer --dev

2.新建插件文件如./prerender.js，内容为：

import puppeteer from 'puppeteer'
import fs from "fs"

/**
 @param routes 预渲染路由地址
 */
const seoPrerender = (routes) => {
  return {
    name: "viteSeoPrerender",
    async closeBundle() {
      // 预渲染逻辑放这里，即打包完成后执行预渲染
      // 复制puppeteer官方示例
      const browser = await puppeteer.launch()
      const page = await browser.newPage()
      for (const key in routes) {
        // 遍历需渲染的路由
        // 这里先简单化把url固定，可通过先启动vite preview的方式取得访问地址和端口
        await page.goto("http://127.0.0.1:4173" + key)
        await page.setViewport({width: 1024, height: 768})
        const content = await page.content()
        const filePath = `./dist${key}/index.html` // 保存的html文件路径
        fs.writeFileSync(filePath, content)
      }
      await browser.close()
    }
  }
}
export default seoPrerender

3.vite.config配置 plugins 项：

import {defineConfig} from 'vite'
import seoPrerender from './prerender'

export default defineConfig({
  plugins: [
    seoPrerender({
      routes: ['/','/about','/contact']
    })
  ]
})

只需要puppeteer示例下加上遍历所需路由地址，然后fs保存为html即可完成一个简单的预渲染，适合所有框架，非vite框架也需稍微改动下即可