Vue-cli production build - browser cache problem? Vue-cli production build - browser cache problem? vue.js vue.js

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>