Skip to content
// vitePressDemo
.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

使用npm init或者yarn init生成package.json文件后,以当前目录搭建vitePress项目(比如docs文件夹),docs文件夹称为项目根。

.vitepress

.vitepress文件夹是根目录下的文件夹(docs),里面储存VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码。

配置文件:.vitepress -> config.js称为配置文件。可以配置项目的标题、描述、主题等。

config.js文件很重要,所有的配置项都写在这里!!!

源文件:.vitepress之外的md文件

1. 项目根目录

其实就是与.vitepress同级的位置。

假设项目名称为vitePressDemo。

如果运行指令vitepress dev,则会把这个目录作为项目根目录,在这个目录下需要有一个.vitepress文件夹,是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的保留位置。

如果想把vitePressDemo文件夹的子文件夹(docs)当成项目根目录,则可以直接运行vitepress dev docs, 给指令传递一个相对路径,然后就把那个子文件夹当成项目根目录。

.
├─ docs                    # project root
│  ├─ .vitepress           # config dir
│  ├─ getting-started.md
│  └─ index.md
└─ ...

这里代表docs为项目的根目录

当项目运行起来后,路由访问为/index.html 、/getting-started.html

docs/index.md            -->  /index.html (accessible as /)
docs/getting-started.md  -->  /getting-started.html

2. 源目录

就是docs下的所有md文件,也就是与.vitepress文件夹同级的。但是假如你想放在docs下的子目录内,可以使用srcDir来配置。

srcDir 选项是相对于项目根目录解析的。例如,使用 srcDir: 'src',文件结构则为

.                          # project root
├─ .vitepress              # config dir
└─ src                     # source dir
├─ getting-started.md
└─ index.md

生成到html为

src/index.md            -->  /index.html (accessible as /)
src/getting-started.md  -->  /getting-started.html