Работа с ресурсами
Ссылки на статические ресурсы
Все файлы Markdown компилируются в компоненты Vue и обрабатываются Vite. Вы можете и должны ссылаться на любые ресурсы, используя относительные URL:
Вы можете ссылаться на статические ресурсы в ваших файлах markdown, ваших компонентах *.vue в теме, стилях и обычных файлах .css, используя как абсолютные пути (основанные на корне проекта), так и относительные пути (основанные на файловой системе). Последнее аналогично поведению, к которому вы могли привыкнуть, если использовали Vite, Vue CLI или file-loader webpack.
Автоматически определяются и включаются в качестве ресурсов общие типы файлов изображений, медиа и шрифтов.
Все ссылки на ресурсы, включая те, что используют абсолютные пути, будут скопированы в выходной каталог с хешированным именем файла в продакшен-сборке. Ресурсы, на которые никогда не было ссылок, не будут скопированы. Ресурсы изображений размером меньше 4kb будут встроены в base64 - это можно настроить через опцию конфигурации vite.
Все статические ссылки на пути, включая абсолютные пути, должны основываться на структуре вашего рабочего каталога.
Публичный каталог
Иногда вам может потребоваться предоставить статические ресурсы, которые не связаны напрямую ни с одним из ваших файлов Markdown или компонентов темы, или вы можете захотеть обслуживать определенные файлы с оригинальным именем файла. Примеры таких файлов включают robots.txt, фавиконы и иконки PWA.
Вы можете разместить эти файлы в каталоге public в каталоге исходных файлов. Например, если корень вашего проекта находится в ./docs и используется местоположение каталога исходных файлов по умолчанию, то ваш публичный каталог будет ./docs/public.
Ресурсы, размещенные в public, будут скопированы в корень выходного каталога как есть.
Обратите внимание, что вы должны ссылаться на файлы, размещенные в public, используя абсолютный путь от корня - например, public/icon.png всегда должен быть ссылкой в исходном коде как /icon.png.
Базовый URL
Если ваш сайт размещается по не корневому URL, вам нужно установить опцию base в .vitepress/config.js. Например, если вы планируете разместить свой сайт по адресу https://foo.github.io/bar/, то base должен быть установлен в '/bar/' (он всегда должен начинаться и заканчиваться слешем).
Все пути к вашим статическим ресурсам автоматически обрабатываются для корректировки различных значений конфигурации base. Например, если у вас есть абсолютная ссылка на ресурс в public в вашем markdown:
Вам не нужно обновлять его при изменении значения конфигурации base в этом случае.
Однако, если вы создаете компонент темы, который динамически ссылается на ресурсы, например, изображение, src которого основано на значении конфигурации темы:
<img :src="theme.logoPath" />В этом случае рекомендуется обернуть путь с помощью вспомогательной функции withBase, предоставляемой VitePress:
<script setup>
import { withBase, useData } from 'vitepress'
const { theme } = useData()
</script>
<template>
<img :src="withBase(theme.logoPath)" />
</template>