Vue3 Assets

Posted on  by admin

The file public/index.html is a template that will be processed with html-webpack-plugin. 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.

Since the index file is used as a template, you can use the lodash template 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, all client-side env variables are also available directly. For example, to use the BASE_URL value:.

Not the answer you're looking for? Browse other questions tagged vue.jsvuejs3vite or ask your own question.

is a type of resource hint that is used to specify resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in.

  • By default, a Vue CLI app will automatically generate preload hints for all files that are needed for the initial rendering of your app.

  • The hints are injected using @vue/preload-webpack-plugin and can be modified / deleted via chainWebpack as config.plugin('preload').

  • is a type of resource hint that tells the browser to prefetch content that the user may visit in the near future in the browser's idle time, after the page finishes loading.

  • By default, a Vue CLI app will automatically generate prefetch hints for all JavaScript files generated for async chunks (as a result of on-demand code splitting via dynamic import()). The hints are injected using @vue/preload-webpack-plugin and can be modified / deleted via chainWebpack as config.plugin('prefetch').


Note for multi page setups. When using a multipage setup, the plugin name above should be changed to match the structure 'prefetch-{pagename}', for example 'prefetch-app'. When the prefetch plugin is disabled, you can manually select specific chunks to prefetch using webpack's inline comments:.

Static Assets Handling #

webpack's runtime will inject prefetch links when the parent chunk is loaded.

  1. Prefetch links will consume bandwidth. If you have a large app with many async chunks and your users are primarily mobile and thus bandwidth-aware, you may want to disable prefetch links and manually select chunks to prefetch. When using Vue CLI with an existing backend, you may need to disable the generation of index.html so that the generated assets can be used in a server-rendered page.

  2. To do so, the following can be added to vue.config.js:. However, this is not really recommended because:. Hard-coded file names makes it more difficult to implement efficient cache control. Hard-coded file names also do not play well with code-splitting, which generates additional JavaScript files with varying filenames.