Статический 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://webpack.js.org/

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

Если вам понравилась эта история, рекомендуем прочитать наш блог