Обрабатывает ли Webpack index.html для приложений Vue?

1

В моем index.html у меня есть внутри тега head:

<link rel="apple-touch-icon" sizes="60x60" href="./assets/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/icons/favicon-16x16.png">
<link rel="manifest" href="./assets/manifest.json">

Однако, когда index.html загружен, эти активы просто загружаются как index.html снова, а не их изображения. Не обрабатывает ли Webpack index.html? Есть ли какой - то другой способ, чтобы получить Обработанные содержания в head тег? Или мне нужно положить их в static каталог?

Теги:
vue.js
webpack
single-page-application
assets

1 ответ

1
Лучший ответ

Вы должны поместить их в static папку - причина в том, что единственное обращение, которое index.html получает от Webpack (как указано в официальном шаблоне Vue), заключается в том, чтобы вставлять результирующие файлы JS и CSS. Он просто игнорирует ваши существующие ссылки на активы. Таким образом, у вас есть несколько вариантов:

  1. Продолжайте использовать официальный шаблон Webpack из Vue и сохраните свои статические активы в /static, затем ссылайтесь на них вручную в index.html используя пути, которые относятся к вашему развертыванию, а не к вашей среде разработки
  2. Используйте свои активы в одном или нескольких компонентах Vue с одним файлом - тогда их относительные URL-адреса будут обрабатываться Vue-загрузчиком и правильно включены в ваш комплект. В этом случае вам не нужно вручную включать их в index.html
  3. Используйте html-webpack-include-assets-plugin для html-webpack-plugin - последний уже используется официальным шаблоном Vue для ввода JS и CSS в index.html Вам нужно будет изменить ваш /build/webpack.prod.conf.js и настройте вышеуказанный плагин - посмотрите на его примеры на GitHub

И чтобы ответить на ваш вопрос - единственный способ получить хеш-версию и сжатие - это ссылаться на свои активы из компонента Vue, используя относительный путь, чтобы они правильно обрабатывались Vue-загрузчиком.

  • 0
    Вы можете объяснить, почему? И если бы мне пришлось поместить их в статическую папку, можно ли было бы по-прежнему использовать преимущества веб-пакета (например, хеш версии в конце или сжатие, если это возможно, удаление пробелов и т. Д.)
  • 0
    Спасибо за подробности. Это имеет больше смысла. Для # 2, возможно ли включить такие вещи в компонент? Я думаю, что такие вещи в заголовке, как favicon, должны быть в источнике страницы.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню