Vue.js 静态站点生成 (SSG) 技术及应用场景

SSG适用于内容稳定、更新不频繁但对性能和SEO要求高的项目，具体包括：①技术文档与官网（如Vue官方文档）；②个人博客与作品集；③营销落地页与企业官网；④内部知识库或手册。

Vue.js 静态站点生成（SSG）是在构建阶段就把 Vue 组件预渲染成真实 HTML 文件的技术，不是运行时生成，也不是靠客户端 JS 拼页面。它直接产出可部署的静态资源，适合内容稳定、更新不频繁但对性能和 SEO 要求高的场景。

适用哪些具体项目类型

SSG 不是万能方案，但它在以下几类项目中效果突出：

• 技术文档与官网：比如 Vue 官方文档、Vite 文档、Pinia 文档——全部用 VitePress 构建，加载快、SEO 友好、维护成本低；
• 个人博客与作品集：文章数量中等（几十到几百篇），内容以 Markdown 编写，无需后台管理，托管在 GitHub Pages 或 Vercel 即可上线；
• 营销落地页与企业官网：首页、产品页、关于我们等固定内容，强调首屏速度与转化率，CDN 直接分发 HTML，抗流量高峰能力强；
• 内部知识库或手册：团队共享的流程说明、API 使用指南、FAQ 页面，结构清晰、搜索需求明确，配合 Algolia 或本地搜索插件即可满足。

主流 SSG 工具怎么选

不同工具定位不同，选错会增加不必要的配置负担：

• VitePress：专为内容驱动型站点设计，零配置起步，Markdown 中可嵌入 Vue 组件，适合文档类项目；
• Vite SSG：基于 Vue 3 + Vite 的轻量级 SSG 方案，适合已有 Vue 应用想加静态能力，路由自动映射、支持动态参数（如 /blog/[slug]）；
• Nuxt 3（static target）：功能最全，支持混合渲染（部分路由静态、部分动态）、数据层集成（API / CMS）、精细的 meta 控制，适合中大型业务型静态站；
• quasar-app-extension-ssg：专为 Quasar v2 用户设计，一键集成，内置 Critical CSS 内联优化，适合用 Quasar 开发的营销页或内部工具门户。

关键实现逻辑是什么

SSG 能跑起来，依赖三个基础环节协同工作：

立即学习“前端免费学习笔记（深入）”；

• 路由发现：通过文件系统约定（如 src/pages/）或配置声明，明确哪些路径需要生成；
• 数据注入：在构建时读取 Markdown、JSON、CMS API 或本地文件，把数据传给组件（例如 asyncData 或 generate: { routes }）；
• HTML 输出：Vue 组件在 Node 环境中执行，输出带真实内容的 HTML 字符串，并附带最小化 JS/CSS，最终写入 dist/ 目录。

和 SSR、CSR 有什么本质区别

理解差异才能避免误用：

• SSG vs CSR：CSR 是浏览器下载 JS 后才渲染，白屏时间长、SEO 差；SSG 提前生成 HTML，用户打开即见内容；
• SSG vs SSR：SSR 每次请求都实时渲染，适合内容高频变动（如用户仪表盘）；SSG 只在构建时渲染一次，适合内容静态或按需重建（如每天凌晨触发 CI 重新生成）；
• 部署方式也不同：SSG 产物扔到任何静态托管服务（Nginx、Cloudflare Pages、AWS S3）就行；SSR 需要 Node 服务长期运行，运维成本高得多。