Why is caching not reset even when changing filenames?

Question

Nginx

There is a frontend on Vuejs

Scenario by which you can identify the problem:
1. The user opened the site in a browser - Mozilla, Chrome, etc.
2. The css/jss files are cached
3. The user has closed the tab with the site in the browser
4. The development team deploys the application to the server. Accordingly, during the build process, the jss / css file names were changed, for example: app.hvgu4n.js -> app.pa3mbpz.js

As I understand it, the next time you visit the site when changing file names, the browser should download the updated js / css files . But this does not happen until you refresh the page with F5 or Ctrl + Shift + R, etc.

5. The user enters the site from the same browser and uses old css/js files, not fresh ones. The download of new files did not happen, although the file names were changed.

Tell me what could be the problem?
Could there be a reason, for example, in the Nginx server on which the vue application files are located?

Answer 1

If your page containing resources is cached, how will the browser know that it's time to load new versions of files?

Answer 2

Disable caching of the current HTML page by writing in it:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

and check if app.css really has different names for different assemblies on the page, is the
assembly exactly different? reset caching for vue:
vue.config.js

chainWebpack: config => {				
      if (process.env.NODE_ENV === 'production') {				
        config.module.rule('vue').uses.delete('cache-loader');				
        config.module.rule('js').uses.delete('cache-loader');				
        config.module.rule('ts').uses.delete('cache-loader');				
        config.module.rule('tsx').uses.delete('cache-loader');				
      }				
    }

Answer 3

If we are talking about CSS files, you need to add a new version of the file. For example: style.css?v=1.0001
And with the following changes add 1.0002 etc.