The question is published on by Tutorial Guruji team.
In my index.html, I have these inside of the
<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">
However, whenever index.html is loaded, those assets just load as index.html again and not their images. Does Webpack not process index.html? Is there some other way to get processed content into the
head tag? Or do I have to put these in the
You have to put these in the
static folder – the reason is that the only treatment that
index.html receives from Webpack (as configured in the official Vue template) is to inject the resulting JS and CSS files. It simply ignores your existing references to assets. So you have several choices:
- Continue using the official Webpack template from Vue and store your static assets in
/static, then references them manually in
index.htmlusing paths which refer to your deployment – not to your development environment
- Use your assets in one or more Vue single-file components – then their relative URLs will be processed by Vue-loader and properly included in your bundle. In this case you do not have to manually include them in
- Use the html-webpack-include-assets-plugin for the html-webpack-plugin – the latter is already used by the official Vue template to inject JS and CSS into
index.htmlYou will have to modify your
/build/webpack.prod.conf.jsand configure the above plugin – look at its examples on GitHub
And to answer your question – the only way to get hash versioning and compression is to refer to your assets from a Vue component using relative path so that they are properly treated by Vue-loader.