|
|
import{_ as i,c as a,ag as e,o as t}from"./chunks/framework.C1C4sYC0.js";const o=JSON.parse('{"title":"Обработка ресурсов","description":"","frontmatter":{},"headers":[],"relativePath":"ru/guide/asset-handling.md","filePath":"ru/guide/asset-handling.md","lastUpdated":1730451393000}'),n={name:"ru/guide/asset-handling.md"};function h(l,s,p,d,k,r){return t(),a("div",null,s[0]||(s[0]=[e(`<h1 id="asset-handling" tabindex="-1">Обработка ресурсов <a class="header-anchor" href="#asset-handling" aria-label="Permalink to "Обработка ресурсов {#asset-handling}""></a></h1><h2 id="referencing-static-assets" tabindex="-1">Ссылки на статические ресурсы <a class="header-anchor" href="#referencing-static-assets" aria-label="Permalink to "Ссылки на статические ресурсы {#referencing-static-assets}""></a></h2><p>Все файлы Markdown компилируются в компоненты Vue и обрабатываются <a href="https://vitejs.dev/guide/assets.html" target="_blank" rel="noreferrer">Vite</a>. Вы можете, <strong>и должны</strong>, ссылаться на любые ресурсы, используя относительные URL:</p><div class="language-md vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">![</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Изображение</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">./image.png</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>Вы можете ссылаться на статические ресурсы в ваших файлах разметки, ваших компонентах <code>*.vue</code> в теме, стилях и обычных файлах <code>.css</code>, используя абсолютные пути (основанные на корне проекта) или относительные пути (основанные на вашей файловой системе). Последнее похоже на поведение, к которому вы привыкли, если использовали Vite, Vue CLI или <code>file-loader</code> в webpack.</p><p>Распространённые типы файлов изображений, мультимедиа и шрифтов определяются и включаются в качестве ресурсов автоматически.</p><div class="tip custom-block"><p class="custom-block-title">Связанные файлы не рассматриваются как ресурсы</p><p>PDF-файлы или другие документы, на которые есть ссылки в файлах с разметкой, не рассматриваются автоматически как ресурсы. Чтобы сделать связанные файлы доступными, вы должны вручную поместить их в каталог <a href="#the-public-directory"><code>public</code></a> вашего проекта.</p></div><p>Все ссылающиеся ресурсы, включая те, которые используют абсолютные пути, будут скопированы в выходной каталог с хэшированным именем файла в производственной сборке. Ресурсы, на которые никогда не ссылались, не будут скопированы. Изображения размером менее 4 КБ будут вставляться в формате base64 — это можно настроить с помощью опции конфигурации <a href="./../reference/site-config#vite"><code>vite</code></a>.</p><p>Все <strong>статические</strong> ссылки на пути, включая абсолютные пути, должны быть основаны на структуре ваших рабочих каталогов.</p><h2 id="the-public-directory" tabindex="-1">Директория <code>public</code> <a class="header-anchor" href="#the-public-directory" aria-label="Permalink to "Директория \`public\` {#the-public-directory}""></a></h2><p>Иногда вам может понадобиться предоставить статические ресурсы, на которые нет прямых ссылок ни в одном из компонентов Markdown или темы, или вы можете захотеть предоставить определённые файлы с оригинальным именем. Примерами таких файлов являются <code>robots.txt</code>, <code>favicon.ico</code> и иконки PWA.</p><p>Вы можете поместить эти файлы в директорию <code>public</code> в <a href="./routing#source-directory">директории с исходными файлами</a>. Например, если корень вашего проекта — <code>./docs</code>, и вы используете стандартное расположение исходного каталога, то ваш публичный каталог будет <code>./docs/public</code>.</p><p>Ресурсы, размещённые в <code>public</code>, будут скопированы в корень выходного каталога как есть.</p><p>Обратите внимание, что вы должны ссылаться на файлы, размещённые в <code>public</code>, используя корневой абсолютный путь — например, <code>public/icon.png</code> всегда должен упоминаться в исходном коде как <code>/icon.png</code>.</p><h2 id="base-url" tabindex="-1">Базовый URL <a class="header-anchor" href="#base-url" aria-label="Permalink to "Базовый URL {#base-url}""></a></h2><p>Если ваш сайт развёрнут на URL-адресе, не являющемся корневым, вам нужно установить параметр <code>base</code> в файле <code>.vitepress/config.js</code>. Например, если вы планируете развернуть свой сайт на <code>https://foo.github.io/bar/</code>, то параметр <code>base</code> следует установить на <code>'/bar/'</code> (он всегда должен начинаться и заканчиваться слэшем).</p><p>Все пути к статическим ресурсам автоматически обрабатываются с учётом различных значений конфигурации <code>base</code>. Например, если в вашей разметке есть абсолютная ссылка на ресурс в директории <code>public</code>:</p><div class="language-md vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">![</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Изображение</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">/image-inside-public.png</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>В этом случае вам <strong>не</strong> нужно обновлять его при изменении значения конфигурации <code>base</code>.</p><p>Однако если вы создаете компонент темы, который динамически ссылается на активы, например, изображение, атрибут <code>src</code> которого основан на значении конфигурации темы:</p><div class="language-vue vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme.logoPath</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><p>В этом случае рекомендуется обернуть путь с помощью <a href="./../reference/runtime-api#withbase">хелпера <code>withBase</code></a>, предоставляемого VitePress:</p><div class="language-vue vp-adaptive-theme"><button title="Скопировать код" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
