什么是 VitePress？

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 内容时提供出色的开发体验 (DX)。

• Vite 支持： 即时服务器启动，编辑始终立即反映（<100 毫秒），无需页面重新加载。

• 内置 Markdown 扩展： 前置信息、表格、语法高亮... 应有尽有。具体来说，VitePress 提供了许多用于处理代码块的先进功能，使其成为高度技术文档的理想选择。

• Vue 增强 Markdown： 由于 Vue 模板与 HTML 具有 100% 的语法兼容性，每个 Markdown 页面也是一个 Vue 单文件组件。您可以使用 Vue 模板功能或导入的 Vue 组件在静态内容中嵌入交互性。

性能

与许多传统 SSG 不同，传统 SSG 中每次导航都会导致整个页面重新加载，而由 VitePress 生成的网站会在首次访问时提供静态 HTML，但会成为 单页应用程序 (SPA) 用于网站内的后续导航。我们认为，这种模式为性能提供了最佳平衡。

• 快速初始加载

  对任何页面的首次访问将提供静态的预渲染 HTML，以实现快速加载速度和最佳 SEO。然后，页面加载一个 JavaScript 包，将页面变成一个 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 提供了明显更好的 DX、更好的生产性能、更精致的默认主题以及更灵活的自定义 API。

VitePress 和 VuePress 之间的 API 差异主要在于主题和自定义。如果您使用的是带有默认主题的 VuePress 1，迁移到 VitePress 应该比较简单。

VuePress 2 也投入了大量精力，它也支持 Vue 3 和 Vite，并与 VuePress 1 具有更高的兼容性。但是，并行维护两个 SSG 并不可持续，因此 Vue 团队决定将 VitePress 作为长期推荐的 SSG。