静态资源处理

优质
小牛编辑
129浏览
2023-12-01

所有的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文件中使用。