VitePress 是一款静态站点生成器（SSG），专门为构建快速且以内容为核心的站点而设计。简言之，VitePress 能够获取以 Markdown 编写的内容，应用相应主题，并生成可轻松部署至任意位置的静态 HTML 页面。
使用场景
- 文档：VitePress 附带一个专为技术文档设计的默认主题。当前您正在阅读的此页面以及 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等文档均基于该主题。Vue.js 官方文档同样基于 VitePress，但为实现不同翻译文档之间的切换，其自定义了自身主题。
- 博客、档案和营销网站：VitePress 支持完全的自定义主题，具备标准 Vite + Vue 应用程序的开发体验。基于 Vite 构建意味着可直接利用其生态系统中丰富的 Vite 插件。此外，VitePress 提供了灵活的 API 以加载数据（本地或远程），并可动态生成路由。只要能在构建时确定数据，就可利用其构建几乎任何类型的网站。Vue.js 官方博客是一个简单的博客页面，它根据本地内容生成其索引页面。
开发体验
VitePress 致力于在使用 Markdown 生成内容时提供卓越的开发体验。
- Vite 驱动：服务器启动即时，编辑变更始终能立即反映（<100ms），无需重新加载页面。
- 内置 Markdown 扩展：frontmatter、表格、语法高亮等一应俱全。具体而言，VitePress 提供了众多用于处理代码块的高级功能，使其成为技术文档的理想之选。
- Vue 增强的 Markdown：每个 Markdown 页面均为 Vue 单文件组件，这得益于 Vue 模板与 HTML 的 100%语法兼容性。可使用 Vue 模板语法或导入的 Vue 组件在静态内容中嵌入交互性。
性能
与许多传统的 SSG 不同，VitePress 生成的网站在初次访问时提供静态 HTML，但在站点内后续导航时会变为单页应用程序（SPA）。我们认为，这种模式为性能提供了最佳平衡：
- 快速的初始加载：对任何页面的初次访问都将是静态的、预呈现的 HTML，以实现极快的加载速度和最佳的 SEO。随后页面会加载一个 JavaScript bundle，将页面转变为 Vue SPA（此过程称为“激活”）。与 SPA 激活缓慢的常见假设不同，由于 Vue 3 良好的原始性能和编译优化，该过程实际上非常迅速。在 PageSpeed Insights 上，典型的 VitePress 站点即使在网络速度较慢的低端移动设备上也能获得近乎完美的性能分数。
- 加载完成后可以快速切换：更重要的是，SPA 模型在首次加载后能够提升用户体验。用户在站点内导航时，不会再触发整个页面的刷新，而是通过获取并动态更新页面的内容来实现切换。VitePress 还会自动预加载视口范围内链接对应的页面片段。这样一来，在大多数情况下，用户在加载完成后就能立即浏览新页面。
- 高效的交互：为了能够在静态 Markdown 中嵌入动态 Vue 部分，每个 Markdown 页面都被处理为 Vue 组件并编译成 JavaScript。这听起来可能效率低下，但 Vue 编译器足够智能，能够将静态和动态部分分开，从而最大限度地减少激活成本和有效负载大小。对于初始的页面加载，静态部分会自动从 JavaScript 有效负载中删除，并在激活期间跳过。
VuePress 是什么？
VitePress 的灵感来源于 VuePress。最初的 VuePress 基于 Vue 2 和 webpack。借助 Vue 3 和 Vite，VitePress 提供了更优的开发体验、更好的生产性能、更精美的默认主题以及更灵活的自定义 API。
VitePress 和 VuePress 之间的 API 区别主要在于主题和自定义。若使用的是带有默认主题的 VuePress 1，迁移至 VitePress 应相对较为简单。
VuePress 2 我们也投入了精力，它同样支持 Vue 3 和 Vite，与 VuePress 1 的兼容性更好。然而，并行维护两个 SSG 难以持续，因此 Vue 团队决定将重点放在 VitePress 上，作为长期的主要 SSG 选择进行推荐。
推荐阅读