vue3预渲染

vue3的项目如何做seo优化？比较简单的做法是预渲染，预渲染跟ssr相比不占用服务器资源，而且配置也十分简单，只需安装vite-plugin-prerender 插件即可。

npm install vite-plugin-prerender --save-dev

vite.config.js:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePrerender from 'vite-plugin-prerender';
const Renderer = vitePrerender.PuppeteerRenderer;
import path from 'path';
export default defineConfig({
  plugins: [
    vue(),

    vitePrerender({
    
    
      // 要渲染的路由
      routes: ['/','/about'],
      // 静态文件目录
      staticDir: path.join(__dirname, 'dist'),
      // 是否压缩 HTML 文件
      minify: true,
      // 网络请求失败、404 错误等情况下应该返回的 HTML 文件
      fallback: 'index.html',
      // 渲染时是否显示浏览器窗口，值写false可用于调试
      renderer: new Renderer({
        headless: true
      })
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})