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

普通网友

墨衍会员 · AI 创作全网分发码龄2年

关注

原创最新推荐文章于 2026-09-20 23:19:37 发布 183 阅读 AI 写同款· GEO 优化 ›

vitepress从0到1，让每个前后端小伙伴都拥有一个属于自己的博客首先，我们在文件夹下定义一个文件，名为home.vue。然后在里面写些想要展示的内容所对应的代码，</</</ 阅读详情

文章目录

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

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

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

正文顶部截图

README区域截图

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 添加依赖即可：

npm add -D vitepress

初始化项目目录结构：

.
├─ 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"
  }
}

本地启动开发服务器：

npm run docs:dev

构建生产版本：

npm run docs:build

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

配置

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

import { defineConfig } from 'vitepress'

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