Disable cache for my vue.js application

[Sunday2000]

Hello, I hope you're well, I have a vue.js application, the application works correctly but as soon as updates are made to the application those who used to use it can no longer access the site because of the caches saved by their respective browsers.
So I added these directives to the htacces to prevent caches from being saved

<IfModule mod_headers.c> Header set Cache-Control "no-cache, no-store, must-revalidate" Header set Pragma "no-cache" Header set Expires 0 </IfModule>

But the problem persists.
NB: The problem does not arise for those who have never been on the site.
Can someone help me cause i'm oblige to host the website on another subdomain to make it work for all my users when i add new features on it.
I want to avoid to tell them to remove cache everytime i add ne feature cause it's something difficult for many of them to do

[Shyam-Chen]

Use Vite.

> vite build

vite v4.5.0 building for production...
✓ 2709 modules transformed.
dist/index.html
dist/assets/_page-bcdce344.css
dist/assets/_page-900cce23.css
...
dist/assets/_page-b14cf4a7.js
dist/assets/_page-5dd9fe76.js
...

[kabeza]

How is vite related to VueJS in this caching problem?

[mscott13]

I think what the person above is showing, is that the Vite compilation process appends a unique string to the file names. When the browser encounters these files, it will essentially update the files because it sees it as an entirely new file.

Consider the filename here as referenced above: _page-bcdce344.css
Notice the "bcdce344" part, that was added to the file during compilation.

[chenxch]

This has nothing to do with vue. This is a problem with the browser caching mechanism. You need to configure the caching protocol of the response to the server request and add some headers to the entry file. Since I don't know your deployment environment, I can only provide some information about nginx. As for cdn, you may need to contact the corresponding service provider for guidance.

https://stackoverflow.com/questions/40243633/disable-nginx-cache-for-javascript-files

It is recommended to use negotiated caching. You can learn about the Last-Modified / ETag mechanism. It generates an ETag cache tag based on file information. When the file changes, the server resource file ETag will change. When loading resources, it will communicate with the server. Align the file ETags. If they are consistent, use the cache. If they are inconsistent, get them from the server.

[kabeza]

Thanks a lot for the clarifications