vue项目上线后服务器资源更新而浏览器有缓存不更新

最新推荐文章于 2025-03-13 20:27:37 发布

原创最新推荐文章于 2025-03-13 20:27:37 发布 · 2.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

浏览器缓存专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过Nginx配置文件禁止特定页面的缓存，包括使用no-cache和no-store指令的区别，并提供了一个在HTML头部加入元标签来控制缓存的方法。

原因

浏览器的缓存机制（分为强缓存和协商缓存）
强缓存：即不向后端发送请求，直接从缓存中读取数据
协商缓存：向后端发起请求，看服务器资源是否更新，如果没有更新就返回304，如果更新了就返回200

解决方法：
/etc/nginx/conf.d/default.conf在服务器的这个文件夹找到配置文件，并下载下来修改，下载下来之后请先复制一份这个配置文件，避免修改出错导致服务器不能正常使用
1.nginx 配置，在在nginx.conf文件做设置，让 index.html 不缓存

location = /index.html {
	root	 /usr/share/nginx/html;
    add_header Cache-Control "no-cache, no-store";
}

或者直接在 location / 这里增加
add_header Cache-Control "no-cache, no-store";

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        add_header Cache-Control "no-cache, no-store";
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    
    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

no-cache, no-store可以只设置一个
no-cache浏览器会缓存，但刷新页面或者重新打开时会请求服务器，服务器可以响应304，如果文件有改动就会响应200
no-store浏览器不缓存，刷新页面需要重新下载页面。
推荐两个都设置设置
关于浏览器缓存原因及解决方法相关连接
2.在 html 页面前面加 meta 标签。

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width,initial-scale=1.0">