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

  • 邮箱的格式一般是什么样的(邮箱的格式)(邮箱格式一般是)

    邮箱的格式一般是什么样的(邮箱的格式)(邮箱格式一般是)

  • windows7安装windowsxp(windows7系统安装xp)(windows7安装windows10失败)

    windows7安装windowsxp(windows7系统安装xp)(windows7安装windows10失败)

  • 抖音取消赞会提醒对方吗(抖音取消赞后会发现吗)

    抖音取消赞会提醒对方吗(抖音取消赞后会发现吗)

  • 无线宽带用不用拉网线(无线宽带不用了会一直扣费吗)

    无线宽带用不用拉网线(无线宽带不用了会一直扣费吗)

  • x1carbon2015和2016区别(x1carbon2015和2016哪个好)

    x1carbon2015和2016区别(x1carbon2015和2016哪个好)

  • f1键的作用(f1键的作用是什么意思)

    f1键的作用(f1键的作用是什么意思)

  • 华为nova7微信视频有美颜吗(华为nova7微信视频)

    华为nova7微信视频有美颜吗(华为nova7微信视频)

  • 掉显卡是什么意思(掉显卡怎么解决)

    掉显卡是什么意思(掉显卡怎么解决)

  • OPPO怎么设置关闭breeno(oppo手机怎么设置关机后闹钟响)

    OPPO怎么设置关闭breeno(oppo手机怎么设置关机后闹钟响)

  • iPhone尺寸(iphone尺寸比例)

    iPhone尺寸(iphone尺寸比例)

  • 电脑怎么下载淘宝网到桌面(电脑怎么下载淘宝卖家版)

    电脑怎么下载淘宝网到桌面(电脑怎么下载淘宝卖家版)

  • 华为媒体音量自动静音(华为媒体音量自动调节)

    华为媒体音量自动静音(华为媒体音量自动调节)

  • 华为手机照片无法移入保密柜(华为手机照片无故损坏)

    华为手机照片无法移入保密柜(华为手机照片无故损坏)

  • 台式电脑加内存条有什么用(台式电脑加内存条直接插上就行了吗)

    台式电脑加内存条有什么用(台式电脑加内存条直接插上就行了吗)

  • kob-w09是什么型号(kob-l09是什么型号)

    kob-w09是什么型号(kob-l09是什么型号)

  • 苹果11耳机插在哪里(苹果耳机插在电脑上没声音)

    苹果11耳机插在哪里(苹果耳机插在电脑上没声音)

  • 苹果xr怎么把音乐设置铃声(苹果xr怎么音量调到最大还是很小声)

    苹果xr怎么把音乐设置铃声(苹果xr怎么音量调到最大还是很小声)

  • 拼多多手机怎样留备注(拼多多手机怎样解绑)

    拼多多手机怎样留备注(拼多多手机怎样解绑)

  • 智能养老模式的特点(智能养老模式的前景)

    智能养老模式的特点(智能养老模式的前景)

  • 苹果拍照镜像怎么取消(苹果拍照镜像怎么办)

    苹果拍照镜像怎么取消(苹果拍照镜像怎么办)

  • 小度智能音箱能打电话吗(小度智能音箱能控制空调吗)

    小度智能音箱能打电话吗(小度智能音箱能控制空调吗)

  • 叨叨记账怎么设置明星(叨叨记账怎么设置读者名字)

    叨叨记账怎么设置明星(叨叨记账怎么设置读者名字)

  • 为什么三星s9卡顿严重(为什么三星s9卡不能用)

    为什么三星s9卡顿严重(为什么三星s9卡不能用)

  • 怎么查看路由器连接几台设备(怎么查看路由器的ip地址)

    怎么查看路由器连接几台设备(怎么查看路由器的ip地址)

  • 华硕主板如何刷BIOS 怎样刷新华硕主板的BIOS(华硕主板如何刷系统)

    华硕主板如何刷BIOS 怎样刷新华硕主板的BIOS(华硕主板如何刷系统)

  • 详解Linux中查找目录和文件的find和locate命令(linux怎么查找)

    详解Linux中查找目录和文件的find和locate命令(linux怎么查找)

  • 【强化学习探索01】Win10 下gym安装

    【强化学习探索01】Win10 下gym安装

  • Kibana 入门实战(1)--简介及安装(kibana 教程)

    Kibana 入门实战(1)--简介及安装(kibana 教程)

  • 公司房产税如何
  • 纳税申报表申报日期
  • 上月社保未扣款怎么回事
  • 资产总额季度平均值计算公式
  • 职工福利费专票账务处理
  • 公司买车能一次性抵扣所得税吗
  • 管理费0.5%每年
  • 代扣个人所得税现金流入哪个科目?
  • 异地开发房地产会一直待在那个城市吗
  • 产品缺陷处理流程
  • 企业销售产品的成本是指已销产品的
  • 财务费用利息收入的账务处理
  • 积累与消费比例怎么计算
  • 开具增值税专用发票承诺函
  • 发票付款证明怎么写
  • 关于金三地税打印控件
  • 公司用的冰箱
  • 个人借款取得的利息收入要交税吗
  • 建筑工程公司开票如何做收入
  • 企业开具咨询费的发票
  • 小企业存货有哪些
  • 劳务服务公司可以承包大型工程吗?
  • 个人从价计征房产税
  • 亿企代账怎么删除科目
  • 保护电脑安全的主要方式
  • 合伙企业 投资
  • 员工报销款应该挂什么科目
  • 车辆理赔过程中,赔付款给谁
  • 发票金额与实际金额不一致违法吗
  • 4芯网线插线顺序图
  • win10设置变成竖排
  • 如何查看自己的qq密码
  • 只有收据没有发票可以保修吗
  • 盘亏固定资产累计折旧
  • 阿尔卑斯山环保
  • 机器学习论文源代码浅读:Autoformer
  • 其他收益会计科目怎么写
  • 扩散分类
  • 占统治地位的英文短语
  • 安装和配置eclipse集成开发环境
  • 物流公司的会计好做吗
  • 付了两次运费发了一个包裹
  • 预缴税款从哪里查
  • 分页 php
  • MySQL慢查询优化面试问题
  • 餐饮公司分店营销方案
  • 公帐的钱可以转到其他人帐户吗
  • 存货成本明细科目表
  • 进项税转出如何结转
  • 提的税与实际交的税区别
  • 投资性房地产在资产负债表哪个科目
  • 企业开负数发票退货后如何处理?
  • 政府发的奖金需要交个税吗
  • 应付票据转应付账款分录
  • 住房公积金的账户状态是封存是什么意思
  • 公司名下没有车可以办油卡吗
  • 主营业务成本暂估怎么算
  • 最低标准买社保公积金个人缴纳多少钱
  • 企业银行存款的流动性强于存货
  • 材料采购是什么会计要素
  • 对公收到几毛测试费怎么做账
  • 筹建期开办费明细
  • sql语句错误提示
  • Mysql version can not be less than 4.1 出错解决办法
  • rhel安装mysql
  • Windows Server 2003将于7月14日停服 想用收费
  • win8玩英雄联盟
  • 微软推出windows1
  • sgrmbroker.exe是什么进程
  • win10右下角的图标点不开
  • linux中tail命令详解
  • opengl绘制简单矩形代码
  • mac 安卓系统
  • 学习雷锋好榜样
  • android camera preview
  • (翻译)你最好骑一辆共享单车
  • python中json的用法
  • 广西增值税发票查询平台
  • 支付水电费的增值税税率文件
  • 朝阳区地方税务局电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设