vite-plugin-ssg 使用

vite-plugin-ssg 插件为 Vite 项目添加 SSG 功能。

安装插件

Bash

npm add -D vite-plugin-ssg

基础配置

JavaScript

import ssg from 'vite-plugin-ssg'

export default defineConfig({
  plugins: [ssg()]
})

构建命令

Bash

# 执行 SSG 构建
vite build
# 或
npm run build

预渲染路由配置

JavaScript

import ssg from 'vite-plugin-ssg'

export default defineConfig({
  plugins: [
    ssg({
      // 预渲染的路由列表
      routes: [
        '/',
        '/about',
        '/blog',
        '/blog/post-1',
        '/blog/post-2'
      ]
    })
  ]
})

动态路由生成

JavaScript

import ssg from 'vite-plugin-ssg'

export default defineConfig({
  plugins: [
    ssg({
      // 函数形式动态生成路由
      async getRoutes() {
        const posts = await fetchPosts()
        return [
          '/',
          '/about',
          ...posts.map(p => `/blog/${p.slug}`)
        ]
      }
    })
  ]
})

注意：动态路由需手动配置或通过 API 获取路由列表。

配置选项

选项	说明
routes	预渲染路由列表
getRoutes	动态获取路由函数
include	包含的路由匹配
exclude	排除的路由匹配

构建输出

JavaScript

dist/
├── index.html
├── about/
│   └── index.html
├── blog/
│   ├── index.html
│   ├── post-1/
│   │   └── index.html
│   └── post-2/
│       └── index.html
└── assets/

与框架集成

text

import vue from '@vitejs/plugin-vue'
import ssg from 'vite-plugin-ssg'

export default defineConfig({
  plugins: [vue(), ssg()]
})

要点总结

vite-plugin-ssg 添加 SSG 功能
routes 配置预渲染路由
getRoutes 动态获取路由列表
构建生成静态 HTML 文件

📝 发现内容有误？点击此处直接编辑