当前位置：首页 > news >正文

VitePress：基于 Vite 的静态站点生成器

news 2026/7/8 15:01:54

文章目录

VitePress：基于 Vite 的静态站点生成器
- 文档
- 主要特性
- 使用方式
- 配置
- 生态支持
- 适用场景
- 协议
- 协议

VitePress：基于 Vite 的静态站点生成器

vuejs 团队开源的 VitePress，目前已在 GitHub 收获 17,970 个 Star：

VitePress 是一个基于 Vue 的静态站点生成器，是 VuePress 的精神继承者，构建在 Vite 之上。

它结合了 Vue 的组件能力与 Vite 的快速构建特性，适合用于文档站点、技术博客以及小型项目的展示页面。

早期写文档多用 VuePress，但随着项目体积增长，冷启动和热更新速度成为痛点。VitePress 用 Vite 替换 webpack，开发体验有明显改善，启动和热更新几乎做到毫秒级响应。

VitePress 内置支持 Markdown 扩展语法，可以在 Markdown 中直接使用 Vue 组件，也可以使用 Vue 的模板语法、计算属性、自定义指令等能力。

文档

VitePress 的官方文档地址是 vitepress.dev，里面包含从入门到进阶的完整教程，包括配置、部署、主题定制、组件使用以及常见问题的解决方案。

主要特性

VitePress 内置的功能覆盖了文档站点常见的几类需求：

**Markdown 扩展：**支持表格、任务列表、数学公式、代码块语法高亮、代码组切换、行高亮等
**Vue 支持：**可以在 Markdown 中直接使用 Vue 组件，支持单文件组件以及自动导入组件
**主题定制：**默认主题提供导航栏、侧边栏、搜索、深色模式、i18n 国际化等开箱即用功能，也可以完全自定义主题
**构建优化：**基于 Vite 的构建链路，支持按需加载、自动压缩资源、PWA 等特性
**SEO 友好：**生成静态 HTML，自带 sitemap、robots.txt 等配置项

使用方式

VitePress 的安装方式比较简单，通过 npm 或 yarn 添加依赖即可：

npmadd-Dvitepress

初始化项目目录结构：

. ├─ docs │ ├─ index.md │ ├─ guide │ │ └─ getting-started.md │ └─ .vitepress │ └─ config.ts └─ package.json

在 package.json 中添加几个脚本命令：

{"scripts":{"docs:dev":"vitepress dev docs","docs:build":"vitepress build docs","docs:preview":"vitepress preview docs"}}

本地启动开发服务器：

npmrun docs:dev

构建生产版本：

npmrun docs:build

构建产物默认输出到 docs/.vitepress/dist 目录，可以直接部署到 Vercel、Netlify、GitHub Pages 或任意静态文件托管服务。

配置

VitePress 的配置文件位于 docs/.vitepress/config.ts（或 config.js），常见的配置项包括站点标题、描述、主题配置、head 注入、markdown 配置等：

import{defineConfig}from'vitepress'exportdefaultdefineConfig({title:'My Docs',description:'项目文档',themeConfig:{nav:[{text:'指南',link:'/guide/getting-started'}],sidebar:[{text:'指南',items:[{text:'快速开始',link:'/guide/getting-started'}]}]}})