Update ru/guide/asset-handling.md

pull/5422/head
Bugo 6 days ago
parent 7cc14b2402
commit 336bee05d5

@ -36,23 +36,15 @@ PDF-файлы или другие документы, на которые ес
## Базовый URL {#base-url} ## Базовый URL {#base-url}
Если ваш сайт развёрнут на URL-адресе, не являющемся корневым, вам нужно установить параметр `base` в файле `.vitepress/config.js`. Например, если вы планируете развернуть свой сайт на `https://foo.github.io/bar/`, то параметр `base` следует установить на `'/bar/'` (он всегда должен начинаться и заканчиваться слэшем). Если ваш сайт развёрнут не в корне URL, задайте параметр [`base`](../reference/site-config#base). Например, если вы планируете разместить сайт по адресу `https://foo.github.io/bar/`, то `base` должен быть установлен в `'/bar/'`.
Все пути к статическим ресурсам автоматически обрабатываются с учётом различных значений конфигурации `base`. Например, если в вашей разметке есть абсолютная ссылка на ресурс в директории `public`: Ссылки на статические ресурсы автоматически корректируются под `base`, поэтому абсолютная ссылка на файл в `public` работает с любым `base` и никогда не требует обновления:
```md ```md
![Изображение](/image-inside-public.png) ![Изображение](/image-inside-public.png)
``` ```
В этом случае вам **не** нужно обновлять его при изменении значения конфигурации `base`. Внимания требуют только динамически формируемые пути — например, изображение, `src` которого основан на значении конфигурации темы. Оборачивайте такие пути хелпером [`withBase`](../reference/runtime-api#withbase), чтобы `base` подставлялся во время выполнения:
Однако если вы создаете компонент темы, который динамически ссылается на активы, например, изображение, атрибут `src` которого основан на значении конфигурации темы:
```vue
<img :src="theme.logoPath" />
```
В этом случае рекомендуется обернуть путь с помощью [хелпера `withBase`](../reference/runtime-api#withbase), предоставляемого VitePress:
```vue ```vue
<script setup> <script setup>
@ -65,3 +57,26 @@ const { theme } = useData()
<img :src="withBase(theme.logoPath)" /> <img :src="withBase(theme.logoPath)" />
</template> </template>
``` ```
## Раздача ресурсов через CDN {#serving-assets-from-a-cdn}
Чтобы раздавать сгенерированные ресурсы — скрипты, стили, шрифты и изображения, импортированные из Markdown или компонентов — с другого домена, отличного от страниц, задайте [`assetsBase`](../reference/site-config#assetsbase):
```ts
export default {
base: '/',
assetsBase: 'https://cdn.example.com/'
}
```
Загрузите директорию `assets` из результата сборки на CDN так, чтобы она была доступна по адресу `https://cdn.example.com/assets/`, а остальную часть результата разверните на своём сайте как обычно. Файлы в `public` ссылаются относительно `base` и остаются вместе со страницами.
Поскольку это значение часто зависит от окружения, его также можно передать через командную строку:
```sh
vitepress build docs --assetsBase "$CDN_URL"
```
::: warning Требуется CORS
Модульные скрипты всегда загружаются в режиме CORS, поэтому кросс-доменный CDN должен отвечать соответствующим заголовком `Access-Control-Allow-Origin`.
:::

Loading…
Cancel
Save