Vue.js 清除用户缓存

Question

I'am deploying a new app version of my Vue.js SPA and got the problem that it's only loads if I clear my cache. So for me this is fine but the customers won't get it. Is there a workaround to check the version and force the browser to reload my page? My Setup is:

• SPA created with latest Vue CLI
• Vue Bootstrap
• Bundled with Webpack
• Hosted in AWS S3 Bucket

Best regards.

Answer 1

Maybe it helps somebody.

I figured out some things. First there seems to be a problem with the cli, after some time the file hashing worked again (maybe a update or just a simple clean install). Second, I'am using aws cloudfront to provide my application, cloudfront caches your site on its endpoints. So I have to invalidate my cloudfront using

aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths '/*' --profile YOUR_PROFILE >/dev/null

So everybody got the new page after refreshing.