尤雨溪官宣 VitePress 1.0，第一个主版本横空出世！

是的没错，那个男人又双叒叕出手了。这次他带来的是 VitePress 1.0，以及颜值爆表的旅拍。

不久前，尤大在朋友圈十分鸡冻地爆料，VitePress 1.0 正式发布，这也是 VitePress 诞生以来升级的第一个语义化主版本，一个值得纪念的里程碑。

然后，尤大就跑路去旅游了，一边移动办公，一边摆拍洱海。果不其然，码生如逆旅，bug 和 life，总要有一个在路上。

作为沉迷学习的 UP 主，我只能一边偷看尤大的“云旅行”流口水，一边啪啪啪码字，给大家科普一下 VitePress。

既然没法偷得浮生半日闲，不如就静下心来深度学习一下：

• VitePress 到底是什么鬼物？

• VitePress 和 VuePress 有何区别？

• 我们可以用 VitePress 来搞什么事情？

VitePress 是什么鬼物？

根据 VitePress 官方文档的简介，VitePress 是一个由 Vite 和 Vue 共同驱动的 SSG（静态站点生成器）。

如果你像我一样，不太清楚 MPA/SPA/SSR/SSG/...... 等一大坨客户端和服务端渲染方式的魔鬼细节，那我们可以用一句话简单理解 VitePress —— Vue/VueUse/Pinia/Vite/Vitest 等官方文档，都是基于 VitePress 构建的。

VitePress 的口号就是将 Markdown 变成优雅的文档，且只需一杯泡面的时间。一杯泡面的时间只需要几分钟，乍一听好像不够持久，但这恰恰是 VitePress 的亮点 —— 快，而且非常快。

VitePress 的特点在于“内容优先，Markdown 至上”，它可以将 Markdown 编写的一切内容，根据应用的主题生成静态 HTML 页面，随时随地部署到地球上。换而言之，VitePress 的设计动机就是构建快速、内容优先的站点。

VitePress vs VuePress

VitePress 和 VuePress 不能说是毫无关系，只能说是大同小异。事实上，VitePress 灵感正是来源于 VuePress。

当然啦，我们都知道 JavaScript 和 Java 的命名也是看起来大同小异，实际上则一龙一猪。既然已有前车之鉴，我们就有必要先瞄一下 VuePress，再比较一下 VuePress vs VitePress 的异同点，从而更系统地学习 VitePress。

根据 VuePress 官方文档的介绍，VuePress 的设计初衷是为了满足 Vue 及其周边生态的文档需求，后来也用于辅助大量用户构建它们的博客和文档等。

VuePress 是一个“Markdown 至上”的 SSG（静态网站生成器）。我们可以使用 Markdown 来撰写文档、博客等，然后 VuePress 会生成一个静态网站来展示它们。

同时，VuePress 可以在一定程度上搞定 Hexo 和 GitBook 等深受程序员群体青睐的文档痛点。

既然 VuePress 如此优秀，为何还要反复造轮子，再孵化出 VitePress 呢？

这是因为，最初的 VuePress 基于 Vue 2 和 webpack。那时的前端工具链中，webpack 还处于垄断地位，后来高产似母猪的尤大又双叒叕孵化了同款竞品 Vite，因为 webpack 在构建 Vue 源码等大型项目时实在是太慢了。

起初 Vite 并没有一夜爆火，但一直在稳定迭代，直到近几年，各大前端生态都开始拥抱 Vite，Vite 真正找到了流量密码。

Vite 原本也没有和 Vue 强耦合，所以可以作为独立的前端工具链无缝衔接。如今，Vite 5 性能已经已经翻了几番，未来规划还会“锈化”，使用 Rust 重构底层功能，敬请期待。

VitePress 也随着 Vite 应运而生。虽然今天尤大官宣的是 VitePress 的第一个主版本升级，但 VitePress 这个项目其实从 2019 年就开始迭代了。借助 Vue 3 和 Vite，VitePress 提供了更好的开发体验和生产性能。

除了早期的构建工具差别，VitePress 和 VuePress 的 API 区别主要在于主题和自定义。如果您之前使用的是默认主题的 VuePress 1，那么迁移到 VitePress 应该会比较丝滑。

目前 VuePress 2 也在维护状态，它也支持 Vue 3 和 Vite，与 VuePress 1 的兼容性比 VitePress 更好。

我不确定 VuePress GitHub 仓库提及的“maintenance mode”（维护模式）的确切含义，比如只维持现状、不更新新功能等，如果你知道，记得在评论区留言科普一下。

虽然但是，同时维护两个 SSG 项目并不现实，哪怕尤大很能肝，Vue 团队也肝不动了。因此，Vue 团队决定重点关注 VitePress，将其作为长期维护的主要 SSG 选择。

为什么要选择使用 VitePress ？

VuePress 构建时，会为站点创建一个 SSR（服务端渲染）的版本，然后通过虚拟访问每一条路径来渲染对应的 HTML。这种方案的灵感来源于 Nuxt 和 Gatsby 等项目，VitePress 大抵也是如此。

事实上，Nuxt 几乎可以完美取代 VuePress 或 VitePress，但 Nuxt 是为构建 App 而生的，而 VitePress 的产品定位则更关注轻量化、内容优先的静态网站。

此外，VitePress 的文档更亲民，且由于 VitePress 比 Nuxt 这种元框架更轻量，学习成本也较低。

性能方面，VitePress 已经有详细的设计说明。传统的 SSG 每次导航都会导致页面完全重载，VitePress 的 SSG 会在首次访问时提供静态 HTML，再变成了 SPA（单页应用程序）进行站内的后续导航，包括但不限于：

• 初始加载很快

• 加载完毕后快速切换

• 高效的交互

至于 VuePress，VitePress 可以视为 VuePress 的孪生兄弟。但 VitePress 比 VuePress 更轻更快，但它在灵活性和可配置性上有所权衡，比如 VitePress 不支持插件系统。所以，如果你没有进阶的定制化需求，VitePress 已经足够将你的内容部署到线上。

如果你想构建和部署自己的个人博客或项目文档，VitePress 愿意为您效劳，而且你可以按需自定义主题，进行更细粒度的定制。尤其是如果你本身就熟悉 Vue + Vite 生态，那么使用起来会更加得心应手。

来自-前端俱乐部，欢迎关注！