静态资源处理
所有的Markdown文件都通过Vite处理编译成Vue组件。你可以并且应当使用相对URL引用静态资源。
![An image](./image.png)
你可以在你的Markdown文件、主题中的*.vue
组件、样式和纯.css
文件使用绝对公共路径(基于项目根目录)或相对路径(基于你的文件系统)。如果你使用过vue-cli
或webpack的file-loader
,后者更符合你的习惯。
常见的图片、媒体和字体文件类型会作为静态资源自动检测和包含。
所有被引用的静态资源,包括使用绝对路径的资源,在生产构建中会被复制到dist
文件夹中,并重命名为hash文件名的文件。没有被引用的静态资源会被被复制。类似于vue-cli
,小于4kb的图片资源会转化为内联的base64字符。
所有静态路径引用,包括绝对路径,应当基于你的工作目录结构。
公共文件
有时候,你可能需要提供在你的Markdown或主题文件都没有直接引用的静态资源(如favicons和PWA 图标)。在项目根目录下的public
目录可以用作转换舱口提供在源代码中没有引用的静态资源(如robots.txt
)或必须保留完全相同文件名(没有hash)的文件。
存放在public
下的静态资源将原样复制到dist
目录的根目录。
注意,你应该使用根绝对路径引用放置在public
文件夹中的文件。例如,文件public/icon.png
在源代码中应该始终作为/icon.png
被引用。
基础 URL
如果你的站点部署在非根URL,你需要在 .vitepress/config.js
中设置base
选项。例如,如果你计划部署你的站点到https://foo.github.io/bar/
,base
选项就应该设置为'/bar/'
(始终以/
开始和结尾)。
设置基础URL后,为了引用public
中的图像,你就需要使用类似/bar/image.png
的URL。 但是,当你觉得改变base
值时,这样会很脆弱。 为此,VitePress提供了一个内置的助手$withBase
(注入在Vue原型上),用于生成正确的路径:
<img :src="$withBase('/foo.png')" alt="foo" />
注意,你不仅可以在主题组件中使用以上语法,还可以在Markdown文件中使用。