资产处理

引用静态资产

所有 Markdown 文件都将编译成 Vue 组件，并由 Vite 处理。您可以（也应该）使用相对 URL 引用任何资产。

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

您可以在 Markdown 文件、主题中的 *.vue 组件、样式和普通 .css 文件中引用静态资产，方法是使用绝对公共路径（基于项目根目录）或相对路径（基于您的文件系统）。后者类似于您在使用 Vite、Vue CLI 或 webpack 的 file-loader 时所熟悉的行为。

常见的图像、媒体和字体文件类型会自动检测并包含为资产。

链接文件不会被视为资产

Markdown 文件中链接引用的 PDF 或其他文档不会自动被视为资产。要使链接文件可访问，您必须手动将它们放置在项目的 public 目录中。

所有引用的资产，包括使用绝对路径的资产，都将在生产构建中复制到输出目录，并使用哈希文件名。未引用的资产将不会被复制。小于 4kb 的图像资产将被内联为 base64 - 这可以通过 vite 配置选项进行配置。

所有静态路径引用，包括绝对路径，都应基于您的工作目录结构。

公共目录

有时您可能需要提供不在任何 Markdown 或主题组件中直接引用的静态资产，或者您可能希望使用原始文件名提供某些文件。此类文件的示例包括 robots.txt、favicon 和 PWA 图标。

您可以将这些文件放在源目录下的 public 目录中。例如，如果您的项目根目录是 ./docs 并且使用默认的源目录位置，那么您的公共目录将是 ./docs/public。

放置在 public 中的资产将原样复制到输出目录的根目录。

请注意，您应该使用根绝对路径引用放置在 public 中的文件 - 例如，public/icon.png 应始终在源代码中引用为 /icon.png。

基本 URL

如果您的网站部署到非根 URL，则需要在 .vitepress/config.js 中设置 base 选项。例如，如果您计划将您的网站部署到 https://foo.github.io/bar/，那么 base 应设置为 '/bar/'（它应该始终以斜杠开头和结尾）。

所有静态资产路径都会自动处理，以适应不同的 base 配置值。例如，如果您在 Markdown 中对 public 下的资产有绝对引用

![An image](/image-inside-public.png)

在这种情况下，您不需要在更改 base 配置值时更新它。

但是，如果您正在编写一个动态链接到资产的主题组件，例如一个 src 基于主题配置值的图像

vue

<img :src="theme.logoPath" />

在这种情况下，建议使用 VitePress 提供的 withBase 帮助器包装路径

vue

<script setup>
import { withBase, useData } from 'vitepress'

const { theme } = useData()
</script>

<template>
  <img :src="withBase(theme.logoPath)" />
</template>

资产处理 ​

引用静态资产 ​

公共目录 ​

基本 URL ​

资产处理

引用静态资产

公共目录

基本 URL