静态站点生成配方：SSG 输出、关键 CSS、Markdown 组件化与 PWA

方案简介

这是 Vitesse 模板中面向内容型/展示型 Web 应用的静态站点生成配方：以 Vue 3 + Vite 为基础，通过 vite-ssg 在构建期完成服务端生成（SSG），配合 beasties 生成关键 CSS 以优化首屏渲染，用 unplugin-vue-markdown 让 Markdown 直接作为组件使用（组件也能在 Markdown 中使用），再用 vite-plugin-pwa 赋予应用 PWA 能力，vite-ssg-sitemap 自动生成站点地图，@vueuse/head 响应式操作文档头信息，最终可零配置部署到 Netlify。适合博客、文档站、产品落地页等以静态内容为主又想要 Vue 交互能力的场景。

亮点与能力

• 使用 vite-ssg 进行服务端生成 (SSG)
• 使用 beasties 的生成关键 CSS
• Markdown 作为组件，也可以让组件在 Markdown 中使用
• markdown-it-prism 提供 Prism 的语法高亮
• prism-theme-vars 利用 CSS 变量自定义 Prism.js 的主题
• vite-plugin-pwa 提供 PWA
• vite-ssg-sitemap 站点地图生成器
• @vueuse/head 响应式地操作文档头信息
• 零配置部署 Netlify

组成与分工

• vite-ssg：服务端生成，构建期输出静态页面
• beasties：关键 CSS 生成器，内联首屏样式
• unplugin-vue-markdown：Markdown 作为组件，也可让组件在 Markdown 中使用
• markdown-it-prism：Prism 的语法高亮
• prism-theme-vars：利用 CSS 变量自定义 Prism.js 的主题
• vite-plugin-pwa：为应用添加 PWA 能力
• vite-ssg-sitemap：站点地图生成器
• @vueuse/head：响应式地操作文档头信息
• Netlify：零配置部署目标

实施步骤

1. 创建项目

bash
npx degit antfu-collective/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm

2. 编写内容

页面基于 src/pages 文件路由组织，内容页可直接用 Markdown 编写（Markdown 作为组件，也可以让组件在 Markdown 中使用），按清单在 vite.config.ts 更改主机名、在 App.vue 中改变标题。

3. 构建并部署

bash
pnpm build

生成用于发布的 dist 文件夹（含 SSG 产物）。前往 Netlify 并选择你的仓库，一路 OK 下去即可完成零配置部署。

注意事项与常见问题

• 官方建议：如果正在寻求更好的 Vue 开发体验和更持续的维护，建议使用 Nuxt 3 代替（它也可以根据需要使用 SPA 或 SSG）。
• 也可以选择 vitesse-lite（轻量版本）或 vitesse-nuxt3（Nuxt 3 版本）等衍生项目按需取舍。

优缺点

• ✓ 静态生成利于首屏与 SEO
• ✓ Markdown 直接作为组件使用
• ✕ 模板维护缓慢

出处

本方案挖掘自开源项目 antfu-collective/vitesse，方案内容与实施命令均来自其 README 原文。