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

what do you use to build your app? – bonusrk Jan 08 '20 at 14:51 — bonusrk, Jan 08 '20 at 14:51
npm run build command in project folder – nickb84 Jan 08 '20 at 15:45 — nickb84, Jan 08 '20 at 15:45

Delphin RUKUNDO · Answer 1 · 2022-05-19T13:21:31.547

28

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.1",
  "private": true,
  ...
}

edited May 19 '22 at 13:21

answered Nov 08 '20 at 22:24

Delphin RUKUNDO

403
5
7

3

This is better way for force cache update. – Ish Jun 10 '21 at 20:48

score 23 · Answer 2 · answered Jan 08 '20 at 14:54

23

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.

answered Jan 08 '20 at 14:54

bonusrk

568
3
10

4

Your solution seems to work. Created 'vue.config.js' with module.exports = { configureWebpack: { output: { filename: '[name].[hash].bundle.js' } } } Vue CLI does seem to have hashing enabled, by default: https://cli.vuejs.org/config/#filenamehashing – akauppi Jun 09 '20 at 09:16
1

This only changes the name of my app.bundle.js but not the other files like /js/0.js – Stefan Höltker Oct 21 '20 at 15:01
because chunk names settings placed in other param of webpack settings, depending of what solution(plugin) you use to split chunks – bonusrk Oct 21 '20 at 20:31

score 3 · Answer 3 · answered Jan 08 '20 at 14:40

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...

answered Jan 08 '20 at 14:40

T. Short

3,260
11
29

but where? in index.html? – nickb84 Jan 08 '20 at 14:53
Yes in the html page that loads your script. Usually webpack adds this version tag automatically. You could try adding it yourself. If you can't, then share your config with us so we can see what is going on. – T. Short Jan 08 '20 at 14:58

score 1 · Answer 4 · answered May 13 '20 at 21:45

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.

score 1 · Answer 5 · answered Aug 06 '21 at 03:24

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

score 0 · Answer 6 · answered Feb 12 '21 at 22:57

The answer for me was caching at my DNS provider level. Basically, I'm using Cloudflare DNS proxy and they are caching the website so in development mode I was not getting the code updates. I had to clear the cache many times to get anything to change. I had to wait a significant period of time before anything update.

Turned it off and it stopped doing that.

score 0 · Answer 7 · answered Aug 07 '21 at 12:15

0

the method I want to suggest

<script src="{{ asset('js/app.js?time=') }}{{ time() }}" defer></script>

answered Aug 07 '21 at 12:15

Akbarali

426
3
13

score 0 · Answer 8 · answered Oct 28 '21 at 04:16

add below script in publc/index.html

<head>
...
  <script type="text/javascript" language="javascript">
    var timestamp = (new Date()).getTime();
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "<%= BASE_URL %>sample.js?t=" + timestamp;
    document.head.appendChild(script);
  </script>
...
</head>

score -7 · Answer 9 · answered Jan 08 '20 at 14:42

-7

could you try ?

vm.$forceUpdate();

Also it's possible that the component it self needs a unique key :

<my-component :key="unique" />

answered Jan 08 '20 at 14:42

Mostafa Abdellaoui

199
1
1
14

3

it's a great anwser to another question, really – Exis Zhang Oct 23 '20 at 22:20

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

9 Answers9

Linked