Skip to content

Latest commit

 

History

History
23 lines (14 loc) · 2.54 KB

asset-url.md

File metadata and controls

23 lines (14 loc) · 2.54 KB

Обработка вложенных URL

По умолчанию vue-loader автоматически обрабатывает стили и файлы шаблонов с помощью css-loader и компилятора шаблонов Vue. В процессе компиляции, все использованные URL, такие как <img src="...">, background: url(...) и CSS @import будут обрабатаны как зависимости модуля.

Например, url(./image.png) будет преобразовано в require('./image.png'), а затем

<img src="../image.png">

будет скомпилировано в:

createElement('img', { attrs: { src: require('../image.png') }})

Так как .png это не JavaScript-файл, вам необходимо настроить Webpack использовать file-loader или url-loader для их обработки. Проект создаваемый с помощью vue-cli уже сделает это за вас.

Преимущества подобного подхода:

  1. file-loader позволяет определить куда нужно скопировать и поместить файл, а также как именовать его с добавлением в имя хэша для лучшего кеширования. Кроме того, это означает что вы можете просто поместить изображения рядом с вашим *.vue файлами и использовать относительные пути, основанные на структуре каталогов, не беспокоясь об адресах при развёртывании. При правильной конфигурации, Webpack будет автоматически заменять пути к файлам в корректные URL в итоговой сборке.

  2. url-loader позволяет вставлять файлы как base-64 ссылки если они меньше указанного размера. Это позволит уменьшить количество HTTP-запросов при использовании маленьких файлов. Если же файл больше указанного порога, то он автоматически подключится с помощью file-loader.