Every time I throw the modified vue project build production package file to the server, I find that the same effect is still the last time, the new modification does not work, I need CTRL +F5 to force the page refresh every time, why?

Vue CLI automatically adds hashes to static CSS, js and img resources.

After multiple debugging, it is found that the entry file index.html needs to be set on the server side to disable caching.

Windows server sets IIS to disable HTML caching

  1. Find the corresponding project, switch to the content view, select index. HTML, and set the corresponding HTTP header:

    Add 'cache-control' with the value: 'no-cache'Copy the code

  2. Set common headers

    Set the common HTTP response header, select Expire WEB Content immediately, and confirm to saveCopy the code

Linux server set nginx to disable HTML caching

When compiling and releasing code, if a JS or CSS is updated, it will automatically add a timestamp and hash value to the file name. In this way, when a new version of HTML is issued, as long as the client requests the new version of HTML, it will automatically find the new JS and CSS. No updated JS, CSS will continue to use the cache, so that not too much impact on the page access speed, but also to ensure that the updated code does not go cache.

server {
        listen       80;
        server_name  test.exmaple.cn;
 
 
        location / {
                if($request_filename ~* .*\.(? : the HTM | HTML) $) # # not cached HTML and HTM configuration page at the end of the file {add_header cache-control"private, no-store, no-cache, must-revalidate, proxy-revalidate";
                }
                root /web/;
                index index.html;
                try_files $uri $uri/ /index.html =404; }}Copy the code

Violence disallows all static resource caches

location ~.*\.(js|css|html|png|jpg)$
{
   add_header Cache-Control no-cache;
}  
Copy the code