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

  • 购买财务软件的会计分录怎么做
  • 什么是价内税不是重复了吗
  • 递延收益影响当期损益吗
  • 合并报表中怎么抵消投资性房地产
  • 以前年度多交的企业所得税怎么调整
  • 企业所得税汇算清缴退税怎么做账
  • 房屋租赁合同印花税的税率
  • 成本法长期股权投资账务处理
  • 土地转让契税税率2020税率表
  • 实收资本转出计入什么科目
  • 用理财产品去抵债违法吗
  • 怎么查核定征收额度
  • 三万以下免税如何开票
  • 发票红冲需要用发票打印吗
  • 企业所得税每季度申报时间
  • 自己是公司法人可以给自己发工资吗
  • 购进的出口货物如何入账
  • 个税专项扣除有几项
  • 年薪制12个月的计算公式
  • 筹建人员是什么工作
  • valorant!
  • bios设置密码有什么用
  • 应收账款周转率越大越好还是越小越好
  • php23种设计模式
  • 其他应收款年末余额较大
  • vue如何学
  • yolov5输出result
  • 小微企业应纳税所得额300万所得税
  • 个人买车缴纳车船税吗
  • 债务重组亏损计入
  • 黄喉蜂虎鸟是保护动物吗
  • 最好的ph计
  • php 解析
  • 随手写-精美笔记本-日记本安卓下载
  • 小程序设计制作
  • 商业企业退货与退款区别
  • 浅析企业坏账产生的原因及对策
  • 转账支票适用范围
  • python读取TXT文件代码
  • 对方公司开收据盖什么章
  • 分配现金股利的分录
  • 自产农产品免征个人所得税吗
  • 金税盘一定要交费吗
  • php无法上传文件
  • phpcms怎么用
  • python copyto
  • 劳务报酬包括哪些
  • 一般纳税人的劳务公司的税率
  • 动迁补偿金
  • 主营业务成本如何设置明细
  • 奖金是职工福利?
  • 收到商业汇票怎么入账
  • 筹建期间发生的所有费用
  • 建筑施工企业购入材料怎么做账
  • 预缴税款附加税享受优惠政策吗
  • 以现金支付办公用品费440元
  • 施工图审查费计算公式
  • 个人独资企业核定征收取消了吗
  • 会计账簿按用途分类分为什么
  • xp系统不能搜索
  • Windows Server 2008系统10个意外惊喜
  • centos怎么调出终端
  • centos用户添加到组
  • 开机停在american megatrends
  • ubuntu 命令行修改用户密码
  • linux系统内核的功能
  • win10系统出现蓝色框框
  • win7 系统没有声音
  • win7自动关闭显示器
  • opengl sphere
  • 深入浅出python中文第二版pdf
  • linux echo echo
  • 手机android版本强制升级
  • NGUI之UILocalize
  • javascript的介绍
  • 基层税务所工作现状
  • 个人所得税如何申报详细流程
  • 材料费增值税发票几个点
  • 宣传费是否要交消费税
  • 大乐透中奖查询走势图
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设