Vuejs cache issue , NPM Build not changing hash each time for SPA vuejs app on Production using Nginx

Question

We have vuejs version 2.6.40 app running as SPA using Laravel as backend API. When we run command npm run build it generates files into dist/* using the same HASH each time for production build.

css/chunk-vendors.1a7cdba8.css
js/chunk-vendors.d2af6920.js
css/app.7ca97c3b.css
js/app.7c8415cc.js

This same HASH creating a huge problem for browser cache, if this has new hash each time will solve vue js browser cache issue.

our vue.config.js has following settgins

module.exports = {
lintOnSave: false,
productionSourceMap: false, 
}

Answer 1

I was struggling with what I though was this issue. However a new hash is only generated if the contents of an asset changes. In other words just rebuilding to dist without changes to your project source files won’t change all the hashes. If you change source css / js files you will notice that the hashes (some, not necessarily all) will change…

Further reading here: https://webpack.js.org/guides/caching/

What could be causing your caching issue is that your index.html file is cached, and hence referencing your assets with previous hashes. Setting no-cache in your headers for index.html should help with that!