位置: 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调用海康摄像头)

  • 小米演示机模式怎么解除(小米演示机模式怎么退出)

    小米演示机模式怎么解除(小米演示机模式怎么退出)

  • 微博怎么删除别人回复自己的评论(微博怎么删除别人的回复)

    微博怎么删除别人回复自己的评论(微博怎么删除别人的回复)

  • 华为p40可以用40w快充吗(华为p40可以用40W充电吗)

    华为p40可以用40w快充吗(华为p40可以用40W充电吗)

  • 荣耀x10后置摄像头是多少(荣耀x10后置摄像头玻璃怎么换)

    荣耀x10后置摄像头是多少(荣耀x10后置摄像头玻璃怎么换)

  • 华为mate20x是多少克

    华为mate20x是多少克

  • 魅族16sPro和魅族16s区别(魅族16spro和魅族16s区别)

    魅族16sPro和魅族16s区别(魅族16spro和魅族16s区别)

  • 苹果x和苹果xsmax的区别(苹果x和苹果xsmax参数对比)

    苹果x和苹果xsmax的区别(苹果x和苹果xsmax参数对比)

  • 苹果手机怎么把照片拼在一起(苹果手机怎么把通讯录导入新苹果)

    苹果手机怎么把照片拼在一起(苹果手机怎么把通讯录导入新苹果)

  • 爱奇艺锦鲤卡是干嘛用的(爱奇艺视频卡兑换)

    爱奇艺锦鲤卡是干嘛用的(爱奇艺视频卡兑换)

  • Excel表格怎样移动表格里的文字(Excel表格怎样移动单元格)

    Excel表格怎样移动表格里的文字(Excel表格怎样移动单元格)

  • ipad air1上市时间(ipad air2上市时间)

    ipad air1上市时间(ipad air2上市时间)

  • iphone8配耳机吗(iphone8带的耳机是什么插口的)

    iphone8配耳机吗(iphone8带的耳机是什么插口的)

  • 抖音号码注销后好友能看见吗(抖音号码注销后多久可以绑定)

    抖音号码注销后好友能看见吗(抖音号码注销后多久可以绑定)

  • 苹果光标颜色是干嘛的(苹果光标颜色是什么)

    苹果光标颜色是干嘛的(苹果光标颜色是什么)

  • 华为怎样分屏使用(华为咋弄分屏)

    华为怎样分屏使用(华为咋弄分屏)

  • 华为duk一al20什么型号(华为duk—al20是什么型号)

    华为duk一al20什么型号(华为duk—al20是什么型号)

  • 为什么快手作品不能置顶(为什么快手作品发不出去)

    为什么快手作品不能置顶(为什么快手作品发不出去)

  • 如何关闭京东短信提醒(怎样关闭京东发短信)

    如何关闭京东短信提醒(怎样关闭京东发短信)

  • 淘宝删掉的订单怎么找回(淘宝删掉的订单怎样找回来)

    淘宝删掉的订单怎么找回(淘宝删掉的订单怎样找回来)

  • mate20什么时候升级eumi10

    mate20什么时候升级eumi10

  • mate30发布会地点(mate30pro发布会)

    mate30发布会地点(mate30pro发布会)

  • 小米9 pro 5G内存有多大的(小米9pro内存扩展)

    小米9 pro 5G内存有多大的(小米9pro内存扩展)

  • 网易云音乐华为下载不了(网易云音乐华为平板)

    网易云音乐华为下载不了(网易云音乐华为平板)

  • 华为p30pro与nova5pro区别(华为p30pro与nova10)

    华为p30pro与nova5pro区别(华为p30pro与nova10)

  • hd7850为什么叫神卡(hd7750为什么叫神卡)

    hd7850为什么叫神卡(hd7750为什么叫神卡)

  • 红米k20pro是曲面屏吗(红米k20pro是曲面屏还是直面屏)

    红米k20pro是曲面屏吗(红米k20pro是曲面屏还是直面屏)

  • 以前年度损益调整
  • 一般纳税人登记证明
  • 装卸搬运服务属于什么税目
  • 小规模季度不超过30万元免税会计分录
  • 税款状态已缴款未入库
  • 人力资源服务费发票可以抵扣吗
  • 房地产开发企业预缴增值税
  • 企业想成为退税商店需具备哪些条件
  • 材料已入库,发票账单未到的会计分录
  • 进项税当月申报怎么申报
  • 企业存款利息计入什么科目
  • 工程预付款未按时支付
  • 服务费公司的账务处理
  • 小企业收到下列票据后,银行存款账户不变的是
  • 个人公司转让协议怎么写
  • 补去年的税款怎么做账
  • 保安服务费可以计入劳务费吗
  • 建安企业劳务成本怎么入账
  • 2017房地产行业流动比率均值
  • 入职不满一年有年假吗
  • 蔬菜销售收入免增值税吗
  • 股权转让需要什么资料
  • 收到农产品发票3%抵9%怎么做账
  • 打印企业银行流水需要密码吗
  • 企业所得税季报人数怎么填
  • 转正工资和试用工资区别
  • 进口增值税可以抵扣销项税额吗
  • 免抵退不得免征和抵扣是什么意思
  • 股东退股资金如何返还
  • 新个人所得税的发展现状
  • 如何保护word文件不被他人修改
  • win10关闭自动更新方法永久
  • 未分配利润转增股本 母公司会计分录
  • 税盘可以全额抵扣是什么意思
  • vue3 global
  • 缴纳房产税需要扣除折旧吗
  • yii框架教程
  • 对于小型微利企业的建议
  • 实收资本明细账模板
  • 房地产企业以房产对外投资需要交什么税
  • 销售地下车库缴纳哪些税
  • php主要用于
  • 对于企业无法支付的应付账款
  • chkconfig命令参数
  • 会计凭证出现的问题
  • ps怎么用魔棒选区
  • ps去水印的三种方法
  • 显示已申报未导入
  • 手机开的发票
  • 出口货物离岸价差异原因说明表在电子税务局的位置
  • 一个人可以有两张同一个银行的卡吗
  • 预留印鉴章是什么章
  • 工程项目成本核算
  • 计提折旧是哪个月的
  • 股权变更的股东个税缴纳
  • 固定资产进项税率
  • 应收账款周转率越大越好还是越小越好
  • 价格调节基金费率
  • 现金冲账是什么意思
  • 劳务公司机械租赁费列入什么费用
  • 结转已到期未兑现的商业承兑汇票会计分录
  • 金蝶系统如何设置套打
  • 总账会计工作流程表
  • where条件加判断
  • sqlserver bulkcopy
  • mysql根据另一张表更新
  • 在windows操作中
  • 如何设置微信语音来电铃声
  • centos7启动卡在界面
  • 微软账号重新登录
  • win8如何打开任务管理器
  • win10玩饥荒
  • cocos2dx用什么ide
  • awk实现wc功能
  • angular1
  • 欢迎使用来电提醒业务是什么意思
  • java对象怎么比较
  • js闭包的定义和用途
  • 三亚国税局各区领导班子
  • 上海交电费户号8位数
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设