how to force clearing cache in chrome when release new Vue app version

Question

I created an app with vue-cli and then I build the dist folder for production.

The app is deployed on IIS with flask backend and works fine.

The problem occurs when I have to make some changes and I have to redo the deployment. After this, users call me because app doesn't work but if I clear the chrome cache, the app works fine again.

How can I fix this problem? Is there a method to clear chrome cache automatically when I release a new application version?

Thanks

my dist folder

deployment: copy and paste folder dist on IIS

if files in dist folder are correct, maybe the problem is in axios cache? i have make some changes also to rest apis

Answer 1

If you use vue-cli, then it has built-in webpack configs for building dist. And in fact it adds hash-names to output files. But if it was removed somehow, you can add it back to webpack config like

  output: {     filename: '[name].[hash].bundle.js'   } 

And your app will looks like this:

And even more, you do not need to handle how all this stuff will be added to html, coz webpack will figure it out for you.

Answer 2

I had the same problem and changing (incrementing) the version number in package.json before running the build command fixed it.

For example by default the version number is set to "0.1.0"

package.json file:

{   "name": "project-name",   "version": "0.1.5",   "private": true,   ... } 

Answer 3

You need to add a version query to your js file. This is how a browser can know if the file has changed and needs to download the new version.

So something like:

<script src="main.js?v=1.1"></script>

<script src="main.js?v=1.2"></script>

etc...

Answer 4

You can't access the browser's cache, that would be huge a security flaw.

To fix it, you must send some headers with your flask responses telling the browser not to cache you app.

This is an example for express.js for you to get the idea:

  setHeaders: function (res, path, stat) {
    res.set('Cache-Control', 'no-cache, no-store, must-revalidate') // HTTP 1.1
    res.set('Pragma', 'no-cache') // HTTP 1.0
    res.set('Expires', '0') // Proxies
  }

You can read a lot more about caching in here.

Answer 5

Assuming this is nothing to do 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)
  },
)

You can also ensure the fe-version is returned based on any sort of uniqueness, here I have used the commit SHA.

Full Article here: https://blog.francium.tech/vue-js-cache-not-getting-cleared-in-production-on-deploy-656fcc5a85fe