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

原因

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

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

Vue项目上线后刷新报错404问题（apache，nginx，tomcat）
一. Vue项目打包发布apache报错: route,配置一个覆盖所有的路由情况 1.需要修改router/index.js中new Router 配置,加一个base: '/htcm_front/ ...
Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题
问题描述:使用vue-cli脚手架工具生成的vue项目,使用npm run build后生成的文件直接双击打开白屏一片. 解决方案: 第一步:修改build文件夹下utils.js,在以下位置加入 i ...
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
vue项目部署到服务器后浏览器标签上的小图标消失不见
背景: 最近在开发项目过程中发现一个问题,项目部署到服务器后在浏览器打开,会发现浏览器标签上的小图标消失不见了.百度查找问题,网上给出了许多解决的方案,例如清除浏览器缓存.把图标的相对路径改成绝对路径 ...
vue项目设置服务器地址,vue项目配置后端服务器地址
vue项目配置后端服务器地址内容精选换一换查询负载均衡器状态树.可通过该接口查询负载均衡器关联的监听器.后端云服务器组.后端云服务器.健康检查.转发策略.转发规则的主要信息,了解负载均衡器下资源 ...
Vue 项目上线优化
上线项目的优化优化上线项目,首先在上线打包时我们通过babel插件将console清除,当然对项目打包后的体积的影响是微乎其微,对项目的入口文件的改善也是很有必要的,因为在开发阶段和上线如果我们使用 ...
Vue项目构建后通过Nginx/SpringBoot/Express/Egg发布
Vue项目构建后通过Nginx/SpringBoot/Express/Egg发布构建当项目开发完毕,只需要运行一行命令就可以打包你的应用: $ yarn build or $ npm run bu ...
Vue项目打包后js文件压缩
前言这段时间因为免费试用了https://free.aliyun.com/一台阿里云的服务器,配置是 2核4G 2M, 因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加 ...
【建议收藏】使用 Netlify 教你免费将React/Vue项目上线！（前端自动化部署服务）
背景想必大家做项目的时候都会遇到项目上线问题吧,项目上线,首先会考虑服务器对吧,对于学生党来说倒还好,购买学生服务器不会花很多钱.其次,我一个前端的居然搞着运维的事情?可不可以简便一点,不要那么复杂 ...

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

原因

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

最新文章

热门文章