Browser cache issues

user_11380315 0
Viewed 699

I'm working on an online platform built on Vue CLI and i am experiencing problems with browser cache :

This is my scenario:

For each modification I make to the platform I need to build my application again (npm run build) . After that I push to a testing branch and do some other operations before going to production. At the end of the process, the old files are replaced by the new ones generated in the bundle.

And here comes my problem: when my customers go to access the platform after an update it often doesn't load because they still have the old files in their browser's cache. Whenever this happens, I advise them to clear their browser's cache and everything goes back to normal, but this is quite inconvenient. could someone give me any suggestion of what i could do to prevent this from happening whenever i modify my platform files?

vue-cli vue.js browser-cache
1 Answers

The following is the default configuration of the project generated by vue-cli

webpack.prod.conf.js:

output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},

You can see that the file name after npm run build has a hash value added like js/vendor.658937d99bd7b1009d76.js, so there should be no cache problem.

Then it may be that the compiled index.html file is cached on the server side, which requires modifying the server configuration to not cache the index.html file.

For example, nginx configuration:

location / {
   root  html;
   add_header  Cache-Control no-store;
   index  index.html index.htm;
}

This way the browser will not cache the index.html file when loading.

user_112294140
Related