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框架也需稍微改动下即可

完整相关代码已上传github：vite-plugin-seo-prerender