基于Vite与Options API的Vue 3预渲染SSG插件求推荐

1. vite-plugin-prerender #

这是一款轻量且专注于预渲染的Vite插件，完全兼容Options API，不会引入Composition API相关依赖，能精准满足你"预渲染部分页面"的需求。

配置示例 #

在vite.config.js中添加插件配置：

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

export default defineConfig({
  plugins: [
    vue(),
    prerender({
      routes: ['/', '/about', '/products'], // 指定需要预渲染的静态路由
      outputDir: path.join(__dirname, 'dist'), // 与Vite默认打包目录保持一致
      renderer: 'vue' // 使用Vue原生渲染器
    })
  ]
})

核心优势 #

• 无Composition API依赖，彻底避免你遇到的unhead相关报错
• 配置极简，仅需指定预渲染路由即可完成设置
• 生成纯静态HTML文件，有效提升首屏加载速度与SEO表现

2. 修复vite-ssg的unhead兼容问题 #

如果你仍希望使用vite-ssg，可通过调整配置让unhead适配Options API：

步骤1：全局初始化unhead #

在main.js中完成unhead的全局注册，确保Options API组件能通过this.$head访问：

import { createApp } from 'vue'
import App from './App.vue'
import { createHead } from '@unhead/vue'

const app = createApp(App)
const head = createHead()
app.use(head)
app.mount('#app')

步骤2：Options API组件中使用unhead #

避免直接调用Composition API的useHead，改用Options API的方式操作页面头部：

<script>
export default {
  mounted() {
    this.$head.push({
      title: '自定义页面标题',
      meta: [
        { name: 'description', content: '页面SEO描述内容' }
      ]
    })
  }
}
</script>

这种调整可规避unhead的Composition API相关错误，同时保留vite-ssg的SSG能力。

通用注意事项 #

• 预渲染仅适用于静态路由（无动态参数的路由），若存在动态路由，需在配置中指定具体的路由路径（如/product/1、/product/2）
• 预渲染后的页面会在打包阶段生成对应HTML文件，部署时直接托管静态文件即可

内容的提问来源于stack exchange，提问作者tienow