в чем разница?
при использовании относительных путей файлы разрешаются и обрабатываются веб-пакетом.
Например, в теге <template> вы используете относительный путь для адресации изображения следующим образом:
<template>
<div>
<img src="./images/cat.png" alt="cat">
</div>
</template>
будет преобразовано в зависимость модуля как:
createElement('img', {
attrs: {
src: require('../images/cat.png') // this is now a module depency
}
})
В приведенном выше примере обрабатываемый файл является файлом изображения с расширением .png. Таким образом, веб-пакет должен знать, что требуемый объект находится в виде файла, и для возврата его общедоступного URL-адреса vue cli использует file-loader и url-loader из коробки.
Bu при обработке ресурсов из каталога static файлы не обрабатываются веб-пакетом и копируются как есть. Вам нужно использовать абсолютные пути для ссылки на файл. Например /static/cat.png
Есть проблемы с производительностью?
когда вы используете относительные пути, файлы обрабатываются url-loader. Вы можете найти его в файле build / webpack.base.conf.js следующим образом:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
опция limit, упомянутая выше, указывает загрузчику URL-адреса встроить файл в виде строки base 64. Например, если у вас есть
//main.js
const cat = require(../images/cat.png); // cat.png is less than 10000 bytes
он будет преобразован и встроен в файл main.js вместо того, чтобы копировать файл изображения в папку dist в виде:
//main.js
const cat = url("data:image/png;base64,iVBFfaGVVGfF...);
Если это тривиальный файл и его размер меньше 10000 байт, браузер не должен отдельно запрашивать данные об изображении на сервере, что позволяет сэкономить в обоих направлениях и сократить количество запросов к серверу.
Но если размер файла больше 10000 КБ, url-загрузчик автоматически передает задание на загрузчик файлов.
file-loader позволяет вам указать, куда копировать файл и как его назвать.
Когда мне следует отдать предпочтение тому или иному методу
если вы не хотите, чтобы webpack обрабатывал ваши ресурсы, используйте папку static . Но имейте в виду, чтобы использовать абсолютные пути.
Просто используйте относительные пути и оставьте хлопот для веб-пакета, будь то встроенный или используйте загрузчик файлов для копирования / переименования файла, используя версии хэшей , что лучше для кэширования.
Подробнее см.