Статический vs src / assets в шаблоне Webpack от Vue CLI
Когда вы создаете новый проект с использованием шаблона «webpack», вы заметите два разных каталога для статических ресурсов в структуре проекта: «src / assets» и «static /». Если вы не знакомы с «веб-пакетом», вы запутаетесь. В этом коротком сообщении мы рассмотрим их варианты использования.
Если вы хотите создать проект Vue, вам, вероятно, следует начать с некоторой основы, поэтому лучше всего использовать шаблон (шаблон, стартер, шаблон и т. Д.). В документации Vue.js на странице установки упоминается использование шаблона Webpack для быстрой сборки, поэтому все новички Vue.js в конечном итоге начнут его использовать. Использование Webpack совершенно нормально, потому что это самый простой способ начать работу и позволяет удовлетворить самые простые потребности разработки.
Этот шаблон поддерживает множество прогрессивных функций Webpack и включает в себя множество замечательных функций, таких как горячая перезагрузка, предоставляемая vue-loader, извлечение CSS, линтинг и так далее. Он также имеет отдельные конфигурации для разработки и производства.
После создания нового проекта с использованием шаблона Webpack с помощью команды:
$ vue init webpack my-project
Вы заметите, что в структуре проекта есть два разных каталога для статических ресурсов: «src / assets» и «static /». Если вы не знакомы с Webpack, вы наверняка запутаетесь. Итак, каковы их варианты использования?
Статический
Любые статические ресурсы, помещенные в «статическую» папку, будут просто скопированы в папку сборки и не пройдут через Webpack. Вам нужно ссылаться на них, используя абсолютные пути.
Источник / активы
Помимо всех ресурсов в каталоге «src», здесь Webpack будет обрабатывать ваши изображения, файлы css и многое другое.
Давайте посмотрим, что именно происходит с файлами, когда они обрабатываются Webpack:
Все URL-адреса ресурсов, такие как ‹img src =”… ”›, background: url (…) и CSS @import, разрешаются Webpack как зависимости модуля, такие как require (‘./ logo.png’).
Затем мы используем загрузчики для Webpack, такие как file-loader и url-loader, для их обработки. В шаблоне Webpack эти загрузчики уже настроены.
Загрузчик файлов помогает определить окончательное расположение файла и его имя с помощью хэшей версий для лучшего кэширования. Таким образом, вы можете разместить свои статические ресурсы рядом с файлами .vue и использовать относительные пути. Нет необходимости класть их строго в папку «assets».
Url-loader помогает условно встроить ресурсы, такие как URL-адрес данных base64, уменьшая количество HTTP-запросов.
И что, черт возьми, мне с этим делать?
Ответ: поместите свои ресурсы в папку «src».
Почему?
Потому что при обработке файлов с помощью webpack:
- Маленькие изображения преобразуются в URL данных в base64, чтобы избежать лишних сетевых запросов.
- Имена файлов результатов включают хэши, и таким образом у нас будет один и тот же URL-адрес, пока содержимое остается неизменным. Таким образом, вам не нужно беспокоиться о том, что браузеры кешируют свои старые версии.
Используя static, вы теряете автоматический хэш, сгенерированный webpack, поэтому изменить URL-адрес файла будет сложно. Тогда может возникнуть логический вопрос: почему вообще существует статическая папка?
В моем небольшом исследовании vuejs я не встречал примеров использования папки static. Итак, давайте просто посмотрим, что говорится в документации по vue-cli:
Когда использовать статическую папку?
- Вам нужен файл с определенным именем в выводе сборки.
- У вас есть тысячи изображений, и вам необходимо динамически ссылаться на их пути.
- Некоторые библиотеки могут быть несовместимы с Webpack, и у вас нет другого выхода, кроме как включить их как тег ‹script›.
Осталось только понять, как работает разрешение правил в Webpack и как правильно настроить файл конфигурации Webpack.
Мы надеемся, что, прочитав о нашем опыте в этой области, вы почувствуете себя намного увереннее, но если вам понадобится помощь в разработке Vue.js, не стесняйтесь связаться с нами!
Ресурсы:
Https://vuejs.org/v2/guide/installation.html http://vuejs-templates.github.io/webpack/
Https://github.com/3rd-Eden/fingerprinting
Https://vue-loader.vuejs.org/guide/asset-url.html
Https://github.com/vuejs/vue-cli/blob/dev/docs/assets.md
Если вам понравилась эта история, рекомендуем прочитать наш блог