vite vue3 seo 预渲染

### Vite 和 Vue3 中实现 SEO 预渲染的方法

为了在基于 Vite 的 Vue3 项目中实现 SEO 友好的预渲染，可以采用定制化的预渲染插件来满足特定需求。这不仅能够提升页面加载速度，还能增强搜索引擎抓取效果。

#### 安装依赖包
首先，在命令行工具中安装必要的开发环境和构建工具：

npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install

接着，添加 `vite-plugin-prerender` 插件用于处理静态 HTML 文件的生成:

npm add vite-plugin-prerender

#### 修改配置文件
编辑项目的根目录下的 `vite.config.ts` 或者 `vite.config.js` 来引入并配置该插件：

对于 TypeScript 用户 (`vite.config.ts`)：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import PrerenderSPAPlugin from 'vite-plugin-prerender'

export default defineConfig({
  plugins: [
    vue(),
    new PrerenderSPAPlugin({
      staticDir: './dist',
      routes: ['/', '/about', '/contact'], // 指定要预先渲染的路由列表
      renderer: new Renderer({
        renderAfterDocumentEvent: 'custom-render-trigger' // 渲染完成后触发自定义事件
      })
    }),
  ]
})

对于 JavaScript 用户 (`vite.config.js`)：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const PrerenderSPAPlugin = require('vite-plugin-prerender')

module.exports = defineConfig({
  plugins: [
    vue(),
    new PrerenderSPAPlugin({
      staticDir: './dist',
      routes: ['/', '/about', '/contact'],
      renderer: {
        renderAfterDocumentEvent: 'custom-render-trigger'
      }
    }),
  ]
})

#### 更新组件生命周期钩子
确保应用程序内的每个页面都能够在适当的时候发出指定事件以便完成渲染过程。通常是在组件挂载之后立即派发此事件：

mounted() {
  document.dispatchEvent(new Event('custom-render-trigger'))
}

通过上述设置，当执行生产模式下打包操作时，将会自动为所选路径生成对应的静态HTML文件[^3]。