设置 VitePress 的公共基础路径：详解与实例

在使用 VitePress 构建静态网站或文档时，一个常见的需求是将网站部署到域名的子路径下，而非根路径。默认情况下，VitePress 假设网站将部署在域名的根路径（即 /）。但如果你的网站需要部署在子路径，比如 https://mywebsite.com/blog/，那么你就需要相应地设置 VitePress 的 base 配置选项。

本文将详细解释如何设置 VitePress 的公共基础路径，并提供实例代码。

一、为什么需要设置基础路径？

当你的网站部署在子路径下时，如果不设置基础路径，VitePress 生成的静态资源（如 CSS、JavaScript 文件）的链接可能会错误地指向根路径，导致资源加载失败。通过设置基础路径，你可以确保 VitePress 正确生成指向子路径的静态资源链接。

二、如何设置基础路径？

在 VitePress 的配置文件中（通常是 .vitepress/config.js），你需要设置 base 选项为你的子路径。例如，如果你的网站将部署在 https://mywebsite.com/blog/，则应将 base 设置为 '/blog/'。

三、实例代码

以下是一个 VitePress 配置文件的示例，其中设置了基础路径为 '/blog/'：

// .vitepress/config.js
module.exports = {
  // 其他配置项...

  base: '/blog/', // 设置基础路径为 '/blog/'

  // 其他配置项...
}

如果你使用的是 Github（或 GitLab）Pages，并且你的仓库名为 repo，你想要将网站部署到 user.github.io/repo/，那么你应该将 base 设置为 '/repo/'：

// .vitepress/config.js
module.exports = {
  // 其他配置项...

  base: '/repo/', // 设置基础路径为 '/repo/'，适用于 Github Pages 部署

  // 其他配置项...
}

四、注意事项

1. 确保路径正确：设置 base 时，请确保路径以斜杠（/）开始和结束，如 '/blog/'。
2. 重新构建：每次更改配置后，都需要重新构建网站以确保更改生效。
3. 验证链接：部署后，请务必检查网站的静态资源链接是否正确，以确保网站能够正常加载。

五、总结

通过设置 VitePress 的 base 选项，你可以轻松地将网站部署到域名的子路径下。只需在配置文件中指定正确的基础路径，即可确保静态资源链接的正确生成和网站的正常加载。希望本文能够帮助你更好地使用 VitePress 构建和部署你的静态网站或文档。