位置: IT常识 - 正文

Vue项目线上发布,都有缓存不生效怎么办?(vue项目上线教程)

编辑:rootadmin
Vue项目线上发布,都有缓存不生效怎么办?

推荐整理分享Vue项目线上发布,都有缓存不生效怎么办?(vue项目上线教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue怎么发布上线,vue怎么发布上线,vue项目怎么发布到服务器,vue项目上线教程,vue项目上线教程,vue发布app,vue 项目发布,vue项目线上部署,内容如对您有帮助,希望把文章链接给更多的朋友!

前言:

每次把修改后的vue项目build构建的打包文件丢到线上服务器后,发现还是上一次的效果,新修改的不起效,每次都需要ctrl+F5强制刷新页面,用户太多不可能让所有人每次都这样去折腾,为啥?

vue cli不是给静态资源css、js、img自动加了哈希么,怎么还会有缓存?

经过多方调试,发现是因为入口文件index.html需要在服务器端设置禁止缓存。

Vue项目线上发布,都有缓存不生效怎么办?(vue项目上线教程)

解决缓存问题可以分两步走:

①nginx配置index不缓存

②代码加入版本更新检测强制刷新

解决方案一:(Linux服务器设置nginx禁用html缓存) 

只配置了不缓存html和htm,js,css等文件没有做处理,是因为我们前端编译发布代码时,如果某个js或css有更新,会自动在文件名上加时间戳、哈希值,这样一发新版时,只要客户端请求了新版的html,就会自动找到新的js、css,没有更新的js、css还会继续用缓存,这样既不会太大的影响网页的访问速度,也能保证更新的代码不走缓存。

禁止index.html

server { listen 80; server_name test.exmaple.cn; location / { if ($request_filename ~* .*\.(?:htm|html)$) ## 配置页面不缓存html和htm结尾的文件 { 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; }}

暴力禁止所有静态资源缓存

location ~.*\.(js|css|html|png|jpg)${ add_header Cache-Control no-cache;} 解决方案二:(Vue-cli代码控制)

1.在public静态目录下新建version.json每次发版更改里面的版本号 

{ "version": "0.0.1"}

2.在src中新建 libs/versionUpdate.js文件

import axios from 'axios'const isNewVersion = () => { let url = `//${window.location.host}/version.json?t=${new Date().getTime()}` axios.get(url).then(res => { if (res.status === 200) { let vueVersion = res.data.version || '1.0.0' let localVueVersion = localStorage.getItem('vueVersion') localStorage.setItem('vueVersion', vueVersion) if (localVueVersion && localVueVersion != vueVersion) { alert('检测到新版本,请点击确认刷新页面哦') window.location.reload(true) return } } })}export default { isNewVersion}

3.在全局路由拦截中写,只要每次版本号不同就重新加载页面配合第一步就可以清楚浏览器缓存

import versionTood from '@/libs/versionUpdate'router.beforeEach(( to, from, next ) => { //判断当前代码版本是否与服务器中代码版本一致,如不一致则刷新页面获取最新 versionTood.isNewVersion();}
本文链接地址:https://www.jiuchutong.com/zhishi/287165.html 转载请保留说明!

上一篇:马尔堡峡湾鸟瞰图,新西兰 (© Mathias Ortmann/Getty Images)(马尔堡酒庄)

下一篇:vue集成海康h5player实现播放(h5调用海康摄像头)

  • 什么叫差额征税呢
  • 房产赠与税什么时候开始的
  • 另收取包装物押金
  • 分红免征企业所得税
  • 建筑企业异地申报个税
  • 管家婆未开账可以录入单据吗
  • 员工培训的费用按照多少钱计入安措费
  • 服务行业成本费用问题与对策
  • 房地产预收账款如何缴纳印花税
  • 销售奖金怎么做会计分录
  • 社会团体收费项目有哪些
  • 增值税附征优惠政策
  • 物业公司收到开发代付物业管理费怎么做账
  • 批发零售企业用什么软件好
  • 关于国际货运代理协会联合会的描述不正确的是
  • 把公司的钱借给别人责任
  • 住宿专票怎么入账
  • 转登记日下期指的是什么
  • 环卫公司增值税税率
  • 企业网银支持互联网专线
  • 出租房电费怎么结算
  • itunes无法链接
  • 签证费会计分录
  • 国家税务开票流程
  • 工资薪金怎么申报9
  • 项目单位自筹资金
  • PHP编程中的__clone()方法使用详解
  • linux相关命令及用法
  • PHP:curl_multi_info_read()的用法_cURL函数
  • postman如何设置token
  • 浏览器下载量排名第一的是
  • 无形资产摊销会影响利润吗
  • iframe frame
  • vue3+element-plus Dialog对话框的使用 与 setup 写法的使用
  • 退货可以吗
  • 委托银行收款的会计分录怎么写
  • 办公楼改造方案
  • 什么是工资薪金所得
  • vue导出word文档打开报错,内容有问题
  • vuecli3创建项目的过程
  • php header refresh
  • 行人检测技术
  • laravel enum
  • ecshop功能
  • 为什么增值税申报表保存不了
  • 差旅费包干是什么意思
  • 土地作为无形资产入账依据
  • 织梦如何采集文章
  • 成立一般纳税人公司流程
  • db2获取当前年月日
  • 如何计算生产费用
  • 核销单取消后出口收汇流程
  • 现金比率合适范围
  • 计件工资怎么算公式
  • 转出的未交增值税转到应交增值税
  • 增值税销项抵扣报税后有效期是多长时间
  • 新会计准则待摊费用还有吗
  • 登记三栏式现金日记账和银行存款日记账的依据
  • 商业企业注销应检查哪方面的问题
  • 苹果正式推送ios
  • linux 详解
  • Deepin 2014.2正式版下载 和安装教程
  • 关于linux操作系统的描述中
  • sethook.exe - sethook进程是什么文件 有何作用
  • mcupdate.dll
  • linux开启ssh服务失败
  • opengl获取鼠标位置
  • javascript 数组操作
  • 当ie7不认!important之后 [布局的解决办法]
  • nodejs settimeout异步
  • android listview属性
  • unity3d游戏开发标准教程pdf
  • textview hint
  • javascript的for循环
  • select ui
  • 护肤品关税税率
  • 历年房产税
  • 暂估收入入账冲回如何会计分录
  • 税务培训主题
  • 怎么打印个人所得税扣缴申报表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设