vue 手机端发布缓存问题

1.页面刷新才更新

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="pragma" content="no-cache">              // 禁止浏览器从本地磁盘缓存上访问页面内容
    <meta http-equiv="cache-control" content="no-cache">       // 请求和响应不缓存
    <meta http-equiv="expires" content="0">                    // 指定页面在缓存中保存多久页面就过期，content="0"指到达0后页面就过期，值可以是GMT格式的时间
    <title>页面标题</title>
</head>

二、添加时间戳

vue build构建时生成时间戳加入 JS及CSS后面.这样会访问新的资源不会走浏览器缓存。

let Timestamp = new Date().getTime();
 
 output: {      
            filename: `js/[name].${Timestamp}.js`,
            chunkFilename: `js/[name].${Timestamp}.js`
        },

三，nginx 配置

vue的所有资源修改后打包出来的名称都会改变，所以可以使用强缓存，对css、js、png、ttf、jpg等

location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
            access_log off;
            add_header Cache-Control max-age=604800;
        }

html文件因为名称不会改变，所以使用协商缓存，html文件有改动就会立即更新,max-age=no-cache代表进入协商缓存，文件改动会自动更新，不改动会返回304

location ~* \.(html)$ {
            access_log off;
            add_header  Cache-Control  max-age=no-cache;
        }

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        gzip on;
        gzip_min_length 1k;
        gzip_buffers 4 16k;
        #gzip_http_version 1.0;
        gzip_comp_level 2;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary off;
        gzip_disable "MSIE [1-6]\.";
        listen       8010;
        server_name  localhost;

        location /wallet_admin_test {
            proxy_pass http://suiyi.columbu.world/wallet_admin_test;
        }
        error_page   500 502 503 504  /50x.html;
         root   html/dist;
        location / {
           
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
        location ~* \.(html)$ {
            access_log off;
            add_header  Cache-Control  max-age=no-cache;
        }
        location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
            access_log off;
            add_header Cache-Control max-age=604800;
        }
    }

}

原文链接：https://blog.csdn.net/zhaofeiweb/article/details/120548968