В моем 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
каталог?
Вы должны поместить их в static
папку - причина в том, что единственное обращение, которое index.html
получает от Webpack (как указано в официальном шаблоне Vue), заключается в том, чтобы вставлять результирующие файлы JS и CSS. Он просто игнорирует ваши существующие ссылки на активы. Таким образом, у вас есть несколько вариантов:
/static
, затем ссылайтесь на них вручную в index.html
используя пути, которые относятся к вашему развертыванию, а не к вашей среде разработкиindex.html
index.html
Вам нужно будет изменить ваш /build/webpack.prod.conf.js
и настройте вышеуказанный плагин - посмотрите на его примеры на GitHubИ чтобы ответить на ваш вопрос - единственный способ получить хеш-версию и сжатие - это ссылаться на свои активы из компонента Vue, используя относительный путь, чтобы они правильно обрабатывались Vue-загрузчиком.