VitePress 资源处理

VitePress 提供了两种主要方式来处理和引用静态资源（如图片、样式表、字体等）：使用 public 目录和使用相对路径。

Public 目录

public 目录是存放那些不需要经过构建处理的静态资源的理想位置。这些文件会原封不动地被复制到最终构建输出的根目录。

默认情况下，public 目录位于 docs/public。

适用场景：

• 需要通过固定 URL 访问的文件，如 favicon.ico, robots.txt。
• 不会在 Markdown 或 Vue 组件中直接引用的资源。
• 体积较大且不需要哈希处理的图片或文件。

如何引用：

存放在 public 目录中的文件应始终使用根绝对路径来引用。

<!-- 假设图片位于 docs/public/logo.png -->

![Logo](/logo.png)

注意，路径以 / 开头，它会解析为网站的根目录。

相对路径引用

你可以将资源文件（如图片）与你的 Markdown 文件放在一起，并使用相对路径来引用它们。这是 VitePress（以及 Vite）推荐的方式。

<!-- 假设图片与 .md 文件在同一目录下 -->

![An image](./image.png)

工作原理：

当你在 Markdown 或 Vue 组件模板中使用相对路径引用一个静态资源时：

1. 该资源会被 Vite 的构建流程处理。
2. 它会被复制到构建输出目录（通常是 dist/assets）。
3. 文件名会自动附加一个哈希值（例如 image.a41e1e69.png），以便进行长期缓存。
4. 引用该资源的路径会自动被更新为构建后的正确路径。

优点：

• 资源共置 (Co-location)：你可以将图片和使用它的 Markdown 文件放在一起，便于管理。
• 缓存优化：文件名中的哈希值确保了当文件内容改变时，浏览器会请求新文件，否则会使用缓存。

base 选项的影响

如果你在 .vitepress/config.js 中配置了 base 选项（例如，部署到 GitHub Pages 的子路径时），VitePress 会自动处理好所有资源路径。

• 对于 public 目录的引用（如 /logo.png），它会自动在前面加上 base 的值。
• 对于相对路径的引用，构建过程已经处理了所有路径，所以也能正常工作。

你无需手动在资源路径中添加 base 前缀。

总结

• 使用 public 目录：适用于那些需要固定路径、不参与构建的全局资源。
• 使用相对路径：推荐方式，适用于与内容紧密相关的资源，可以获得更好的性能和缓存控制。