Vue-cli production build - browser cache problem?
Assuming this is nothing to with service worker/PWA, the solution could be implemented by returning the front end version by letting the server return the current version of the Vue App everytime.
axiosConfig.js
axios.interceptors.response.use( (resp) => { let fe_version = resp.headers['fe-version'] || 'default' if(fe_version !== localStorage.getItem('fe-version') && resp.config.method == 'get'){ localStorage.setItem('fe-version', fe_version) window.location.reload() // For new version, simply reload on any get } return Promise.resolve(resp) },)
Full Article here: https://blog.francium.tech/vue-js-cache-not-getting-cleared-in-production-on-deploy-656fcc5a85fe
A possible problem could be that the browser is caching the index.html
file.
Try to disable cache for index.html
like this:
<meta http-equiv="cache-control" content="max-age=0" /><meta http-equiv="cache-control" content="no-cache" /><meta http-equiv="expires" content="0" /><meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /><meta http-equiv="pragma" content="no-cache" />
Or if you are using a .htaccess file, add this code to the bottom of the file:
<Files index.html>FileETag NoneHeader unset ETagHeader set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"Header set Pragma "no-cache"Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"</Files>