1

I have a VueJS application that is deployed to a local IIS 10 server for intranet use.

Trouble is, the index.html file is getting cached and a forced, manual clearing of the browser is needed to see updates. I understand there are ways on the server side to prevent this, but I'm unclear based on what I've read so far as to what the proper way of making sure the html file isn't cached is (js, css and the like are, of course, not cached since they have the additional value appended to the file name during build.)

I'm very much a novice when it comes to the server side of things, so any insight would be greatly appreciated. Thanks!

Mike J
  • 53
  • 7
  • show your code. – Ehsan Aug 20 '20 at 14:24
  • i guess it's the browser behavior to cache it. To prevent it https://stackoverflow.com/questions/1922910/force-browser-to-clear-cache . Try to refer this. I hope it help – markcc Aug 20 '20 at 15:16

1 Answers1

0

Which packaging tool do you use in your project? Generally speaking, Webpack/Vue-CLI has settings for prevent the file from caching in the browser on the client-side. In other words, it adds hash value to output files which could flag the version we build recently, this will result in the client browser to forcibly request the new version file.
In the Webpack.config.js

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

https://webpack.js.org/guides/caching/
See these links for more details.
Browser cache problems with webpack chunks and vue.js components
how to force clearing cache in chrome when release new Vue app version
VueJS/browser caching production builds

Abraham Qian
  • 7,117
  • 1
  • 8
  • 22
  • Yes, my css and js files are hashed upon build with webpack. But it seems that it's always serving up the same index.htm file and so is calling cached js and css. – Mike J Oct 08 '20 at 18:53