VitePress 项目结构探秘：项目根与源码目录

在 VitePress 的世界里，构建文档网站变得前所未有的简单和高效。作为 Vite 生态中的一颗璀璨明珠，VitePress 专为文档网站量身打造，它利用 Markdown 文件和 Vue 组件，帮助我们快速生成静态网站。在深入使用 VitePress 之前，理解项目根和源码目录这两个核心概念至关重要。

一、项目根目录

项目根目录是 VitePress 查找 .vitepress 特殊目录的起点。.vitepress 目录是 VitePress 的配置文件、开发服务器缓存、构建输出以及可选的主题自定义代码的保留位置。

当你从命令行运行 vitepress dev 或 vitepress build 时，VitePress 会将当前工作目录视为项目根。如果你的 VitePress 项目位于子目录中，例如 ./docs，你可以通过传递相对路径来指定它作为根目录。例如：

vitepress dev docs

对于以下目录结构：

.
├─ docs                    # 项目根
│  ├─ .vitepress           # 配置目录
│  ├─ getting-started.md
│  └─ index.md
└─ ...

运行上述命令后，将生成以下源到 HTML 的映射：

docs/index.md            -->  /index.html (可作为 / 访问)
docs/getting-started.md  -->  /getting-started.html

二、源码目录

源码目录是存放 Markdown 源文件的地方。默认情况下，它与项目根目录相同。但是，你可以通过 srcDir 配置选项来自定义它。

srcDir 选项是相对于项目根目录解析的，并且这一配置通常是在 .vitepress/config.js 文件中进行的。例如，设置 srcDir: 'src' 后，你的文件结构将如下所示：

.                          # 项目根
├─ .vitepress              # 配置目录
│  └─ config.js            # 配置文件（包含 srcDir 配置）
└─ src                     # 源码目录
   ├─ getting-started.md
   └─ index.md

在 .vitepress/config.js 文件中，你可以添加如下配置来指定源码目录：

// docs/.vitepress/config.js
module.exports = {
  // 其他配置项...
  srcDir: 'src', // 指定源码目录为 'src'
};

此时，生成的源到 HTML 的映射为：

src/index.md            -->  /index.html (可作为 / 访问)
src/getting-started.md  -->  /getting-started.html

三、实例代码与配置

为了更直观地理解这两个概念，让我们创建一个简单的 VitePress 项目（此处省略具体步骤，与原文相同）。

四、总结

通过本文的介绍，我们深入了解了 VitePress 项目中的两个核心概念：项目根目录和源码目录。项目根目录是 VitePress 查找配置和构建输出的地方，而源码目录则是存放 Markdown 源文件的位置。通过合理配置这两个目录（特别是在 .vitepress/config.js 文件中设置 srcDir），我们可以灵活地组织和管理文档网站的内容。希望本文能帮助你更好地掌握 VitePress，并激发你使用它来构建自己的文档网站的热情。

---

这样，文章就补充了关于srcDir: 'src'配置的具体位置和方式。