VuePress 简介

Posted2022-11-08

Updated2023-02-04

ByRudy

VuePress 是由 Vue.js 支持的静态网站生成工具，它以 Markdown 为中心，常用于构建项目文档、个人博客，可以帮助你快速生成一个静态网站来展示内容。

VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。

工作原理

VuePress 由两部分组成：

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack 驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。

在构建时，VuePress 会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的 HTML。这种做法的灵感来源于 Nuxt 的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby。

目前，VuePress 主要有两个版本：1.x 和 2.x 版本。VuePress v2 的核心思想和流程是和 v1 一致的，但 v2 API 经过了重新设计，更加标准化。

相对于 VuePress v1，v2 版本主要有以下改动和优化：

VuePress v2 现在使用 Vue 3，因此你要保证你的组件和其他客户端文件是适用于 Vue 3 的。
VuePress v2 是使用 TypeScript 开发的，因此它能提供更好的类型支持。（强烈推荐使用 TypeScript 来开发插件和主题）
VuePress v2 的配置文件也同样支持 TypeScript，你可以直接使用 .vuepress/config.ts 。
VuePress v2 支持使用 Webpack 和 Vite 作为打包工具。现在默认的打包工具是 Vite，但你仍然可以选择使用 Webpack。你甚至可以在开发模式使用 Vite 来获取更好的开发体验，而在构建模式使用 Webpack 来获取更好的浏览器兼容性。
VuePress v2 现在是纯 ESM 包，CommonJS 格式的配置文件不再被支持。

建议：如果你的项目正在使用 VuePress v1，且运行良好，可以继续使用该版本；如果你是 VuePress 的新用户，建议尝试 VuePress v2 版本。

注意：VuePress v1 的插件和主题与 VuePress v2 不兼容，需要将它们升级到与 v2 对应的版本方可使用。