如何在Vite+Svelte中实现SSG（静态站点生成）

当然可以用标准 Vite + Svelte 安装的模板实现 SSG 预渲染，以下是两种实用方案：

方案一：使用 Vite 官方 SSG 插件 #

1. 安装依赖：

npm install -D @vitejs/plugin-ssg

2. 修改 vite.config.js，引入并配置插件：

import { ssg } from '@vitejs/plugin-ssg'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default {
  plugins: [
    svelte(),
    ssg({
      entry: '/src/main.js', // 对应你的项目入口路径
      format: 'cjs' // 可根据项目环境切换为 esm
    })
  ]
}

3. 调整入口文件（如 src/main.js），导出初始化函数供 SSG 调用：

import App from './App.svelte'

export async function createApp() {
  const app = new App({
    target: document.getElementById('app'),
    hydrate: true // 开启客户端水合，保留交互能力
  })
  return { app }
}

// 非 SSR 环境下直接初始化
if (import.meta.env.SSR === false) {
  createApp()
}

4. 执行 npm run build，生成的 dist 目录下的 HTML 会包含完整预渲染的 DOM 结构，而非仅空的 app 根元素。

方案二：基于 SvelteKit 静态导出 #

SvelteKit 是官方推荐的 Svelte 框架，内置 Vite 支持，静态导出更便捷：

1. 创建项目时选择静态站点模板：

npm create svelte@latest my-app

创建过程中选择「Static site」选项，自动配置静态适配器。
2. 安装依赖后执行 npm run build，预渲染后的静态文件会生成在 build 目录（可通过配置修改为 dist）。

关键注意点 #

• 若页面包含异步数据，需在 SSG 阶段提前获取并注入组件，确保预渲染内容完整
• 开启 hydrate: true 可让客户端在预渲染 HTML 基础上接管交互，兼顾 SEO 和用户体验

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