vitepress public
时间: 2025-02-25 20:02:29 浏览: 53
### VitePress 中 `public` 文件夹的配置与使用
在 VitePress 项目结构中,`public` 文件夹用于放置静态资源文件。这些文件会被直接复制到构建输出目录下的根路径[^4]。
#### 创建 `public` 文件夹并添加资源
为了利用 `public` 文件夹的功能,在项目的 `docs` 目录下创建名为 `public` 的子文件夹:
```bash
mkdir docs/public
```
接着,可将任何希望作为静态资产发布的文件放入此文件夹内,比如图片、字体或其他类型的媒体文件。假设要替换网站图标,则需准备一张 PNG 图片命名为 `1.png` 并存入该文件夹中。
#### 配置静态资源引用
为了让 VitePress 正确识别和处理放在 `public` 文件夹中的资源,需要通过页面前事项(Front Matter)来定义头部标签。具体来说是在 `_config.yml` 或者特定页面顶部加入 YAML 格式的 Front Matter 来指定 `<head>` 元素内的链接关系。对于设置网站图标的例子而言,应该这样写:
```yaml
---
title: 文档首页
head:
- - link
- { rel: 'icon', href: '/1.png' } // 设置网站图标
---
# 页面正文...
```
上述代码片段表明,当访问这个页面时,浏览器会尝试加载位于 `/1.png` 路径处的图像作为网页标签页上的小图标显示出来。注意这里的 URL 是相对于站点根部开始计算的绝对路径形式。
#### 访问公共文件
一旦完成了以上步骤,部署后的应用将会把 `public/1.png` 映射成可以直接在网络地址栏输入获取到的实际位置。因此,无论何时只要涉及到引入外部 CSS、JavaScript 或其他非 HTML 类型的数据流时,都可以遵循相同的方式操作即可。
阅读全文
相关推荐














