How do i cache bust my vue apps deployed in nginx?

Question

Good day.

I have a few vue apps that are deployed in my nginx server and, sometimes, when i update my apps the users don't seem to be able to access the new versions due to their cache.

How do i cache bust my vue apps without having to change the name of every file and component reference i have in my apps? Is there an easy to use npm plugin i can add to my projects or something i can do before i run npm run build to create their dist folders? Can i do any of that without having to temper with my webpack or nginx config files?

Possible duplicate of [VueJS/browser caching production builds](https://stackoverflow.com/questions/45867357/vuejs-browser-caching-production-builds) — Nika Kurashvili, Jul 26 '19 at 06:58
My question is actually a tad different since i don't want to mess with my webpack and nginx config files. I'll edit the question accordingly . — Otorrinolaringologista -man, Jul 26 '19 at 13:21
Are you using a CDN, like cloudflare for example? That would void any of your attempts to achieve your goal unless you purge its cache also either programmatically or from the console dashboard. If you are not using CDNs the only solutions I see is, at every deploy, to copy the build files under a new directory although that means messing with your nginx.conf file — Ric0, Jul 28 '19 at 19:37

score 0 · Answer 1 · answered Jul 02 '20 at 13:55

Assuming this is nothing to with service worker/pwa, the solution could be implemented by returning the front end version.

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

How do i cache bust my vue apps deployed in nginx?

1 Answers1