HTML and Static Assets | Vue index html
HTMLTheIndexFileThefilepublic/index.htmlisatemplatethatwillbeprocessedwithhtml-webpack-plugin[1].Duringbuild,assetlinkswillbeinjectedautomatically.Inaddition,VueCLIalsoautomaticallyinjectsresourcehints(preload/prefetch),manifest/iconlinks(whenPWApluginisused),andtheassetlinksfortheJavaScriptandCSSfilesproducedduringthebuild.InterpolationSincetheindexfileisusedasatemplate,youcanusethelodashtemplate[2]syntaxtointerpolatevaluesinit:<%=VALUE%>forunescapedinterpolation;<%-VALUE%>forHT...
HTML The Index FileThe file public/index.html is a template that will be processed with html-webpack-plugin[1]. During build, asset links will be injected automatically. In addition, Vue CLI also automatically injects resource hints (preload/prefetch), manifest/icon links (when PWA plugin is used), and the asset links for the JavaScript and CSS files produced during the build.
InterpolationSince the index file is used as a template, you can use the lodash template[2] syntax to interpolate values in it:
<%= VALUE %> for unescaped interpolation;<%- VALUE %> for HTML-escaped interpolation;<% expression %> for JavaScript control flows.In addition to the default values exposed by html-webpack-plugin[3], all client-side env variables[4] are also available directly. For example, to use the BASE_URL value:
<link rel="icon" href="<%= BASE_URL %>favicon.ico">See also:
Preload<link rel="preload">[5] is a type of resource hint that...