位置: IT常识 - 正文

前端部署发布项目后,如何通知用户刷新页面、清除缓存(前端部署发布项目有哪些)

编辑:rootadmin
前端部署发布项目后,如何通知用户刷新页面、清除缓存

推荐整理分享前端部署发布项目后,如何通知用户刷新页面、清除缓存(前端部署发布项目有哪些),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端项目如何部署到服务器,前端项目部署与发布,前端项目部署与发布,前端部署发布项目是什么,前端 部署,前端部署发布项目怎么做,前端项目部署与发布,前端部署发布项目怎么做,内容如对您有帮助,希望把文章链接给更多的朋友!

以下只是一些思路,有更好的实现方式可以留言一起交流学习

方式一:纯前端 在每次发布前端时,使用webpack构建命令生成一个json文件,json中写个随机生成的一个字符串(比如时间戳),每次打包程序都会自动更新这个json文件。 在项目中,通过定时任务或者在切换页面路由时,请求json文件。使用本地保存的上一次生成的字符串和json文件中的字符串进行比较,如果两个字符串不一样,则说明前端重新部署了,提醒用户进行更新或进行强制刷新的操作。

方式二:前后端配合 在每个请求的header里面加上发版版本号,和保留在客户端的上一次版本号进行比较,如果不一致则强制刷新,刷新后保存当前版本号。(或者单独写一个返回版本号的接口)

下面重点说一下纯前端如何做:

①webpack构建 生成一个json文件,在项目目录下新建plugin文件夹,新建version-webpack-plugin.js如下

/** 自定义的插件: 生成版本号json文件 */const fs = require("fs");class VersionPlugin { apply(compiler) { // emit 是异步 hook,使用 tapAsync 触及它,还可以使用 tapPromise/tap(同步) compiler.hooks.emit.tap("Version Plugin", (compilation) => { const outputPath = compiler.path || compilation.options.output.path; const versionFile = outputPath + "/version.json"; const timestamp = Date.now(); // 时间戳作为版本号 const content = `{"version": "${timestamp}"}`; /** 如果路径存在则返回 true,否则返回 false。 */ if (!fs.existsSync(outputPath)) { // 同步地创建目录。 返回 undefined 或创建的第一个目录路径(如果 recursive 为 true)。 这是 fs.mkdir() 的同步版本。 fs.mkdirSync(outputPath, { recursive: true }); } // 生成json文件 fs.writeFileSync(versionFile, content, { encoding: "utf8", flag: "w", }); }); }}module.exports = { VersionPlugin };

②在vue.config.js中使用者个 plugin

前端部署发布项目后,如何通知用户刷新页面、清除缓存(前端部署发布项目有哪些)

const { VersionPlugin } = require('./plugin/version-webpack-plugin.js');

③在每次执行webpack构建命令,都会在dist目录下生成一个version.json文件,里面有一个字段叫 version,值是构建时的时间戳,每次构建都会生成一个新的时间戳。

④发起ajax请求,请求version.json文件获取version时间戳,和本地保存的上一次的时间戳做比较,如果不一样,则进行对应的操作。

import axios from 'axios'import {MessageBox} from 'element-ui'export function reloadVersion() { axios.get(window.location.origin + '/plm/version.json?v=' + Date.now()).then(rsp => { let localVersion = localStorage.getItem('localVersion') let onlineVersion = rsp.data.version if(onlineVersion){ if(localVersion!==onlineVersion){ // 弹框提示更新 MessageBox.confirm('有版本更新,是否刷新确保获取最新数据?', '版本更新', { confirmButtonText: '更新', cancelButtonText: '取消', type: 'warning' }).then(() => { // 发版版本号和本地版本号不一致,保存最新的版本号到本地,并刷新页面获取最新的页面 localStorage.setItem('localVersion',onlineVersion) window.location.reload(); }) } } })}

⑤请求发起的时机,可以使用定时器或者在切换页面的时候进行校验版本。根据自己的实际情况选择合适的调用时机。 

(二)通过监听网页端的报错,进行相应的处理。

如果是覆盖式的更新,有可能发版前就已经删除了上一个版本的dist文件,会造成缓存的页面依然调用已经被删除的文件,所以会白屏报错。报错就有可能不会执行到上面发起请求获取版本号的操作。所以如果监听到如下的几种报错,可以进行刷新页面的操作,

在index.html根目录文件中加入如下代码。为了防止页面一直刷新,所以加了一个超过次数就不再继续刷新的逻辑

<script> // 错误监听 window.addEventListener('error', (e) => { console.log('globalError'+e) // 类似manifest.js和app.js等静态资源报错 if(e.target.outerHTML.indexOf('js/manifest.') != -1 || e.target.outerHTML.indexOf('js/app.') != -1|| e.target.outerHTML.indexOf('js/chunk-') != -1){ var errorTime = sessionStorage.getItem('mainAppErrorTime') if(errorTime&&errorTime>0){ errorTime++ } else{ errorTime = 1 } var timer = setTimeout(function() { // 错误次数存在缓存,刷新超过3次不会继续刷新。退出页面重进后,次数重置 sessionStorage.setItem('mainAppErrorTime', errorTime) window.location.reload() }, 1000); if(errorTime&&errorTime>=3){ clearTimeout(timer) // 清空定时器 } } }, true); </script>
本文链接地址:https://www.jiuchutong.com/zhishi/297304.html 转载请保留说明!

上一篇:如何使用ssh密钥的方式实现无密码scp传输文件(ssh怎么带密码)

下一篇:vue-nginx刷新404问题

  • 支付宝自动转入余额宝怎么取消(支付宝自动转入余额宝是什么意思)

    支付宝自动转入余额宝怎么取消(支付宝自动转入余额宝是什么意思)

  • 微信羊城通乘车码用不了(微信羊城通乘车码怎么用)

    微信羊城通乘车码用不了(微信羊城通乘车码怎么用)

  • 计算机能直接识别和执行的语言(计算机能直接识别和执行用汇编语言)

    计算机能直接识别和执行的语言(计算机能直接识别和执行用汇编语言)

  • 电脑能打开网页但是软件不可以(电脑能打开网页打不开视频)

    电脑能打开网页但是软件不可以(电脑能打开网页打不开视频)

  • 苹果11可以快充吗(苹果11可以快充多少w)

    苹果11可以快充吗(苹果11可以快充多少w)

  • 主题商店怎么自己制作主题(主题商店怎么自定义壁纸)

    主题商店怎么自己制作主题(主题商店怎么自定义壁纸)

  • 苹果序列号dn开头是什么意思(苹果序列号DN开头好不好)

    苹果序列号dn开头是什么意思(苹果序列号DN开头好不好)

  • 魅族16有光学防抖吗(魅族16th有没有光学防抖)

    魅族16有光学防抖吗(魅族16th有没有光学防抖)

  • 苹果x手电筒快捷键(苹果x手电筒快捷键怎么设置)

    苹果x手电筒快捷键(苹果x手电筒快捷键怎么设置)

  • 小米手机后盖碎了怎么换(小米手机后盖碎了可以保修吗)

    小米手机后盖碎了怎么换(小米手机后盖碎了可以保修吗)

  • uhd617相当于什么显卡(uhd617和uhd620)

    uhd617相当于什么显卡(uhd617和uhd620)

  • 新买的ipad有膜吗(新ipad有膜么)

    新买的ipad有膜吗(新ipad有膜么)

  • 快手极速版咋暂停播放(快手极速版咋暂停了)

    快手极速版咋暂停播放(快手极速版咋暂停了)

  • 华为手机卡显示hd什么意思(华为手机卡显示仅限紧急呼叫怎么回事)

    华为手机卡显示hd什么意思(华为手机卡显示仅限紧急呼叫怎么回事)

  • 快手转发别人视频教程(快手转发别人视频作者会知道吗)

    快手转发别人视频教程(快手转发别人视频作者会知道吗)

  • 为什么优酷投屏不了了(为什么优酷投屏到电视只能试看)

    为什么优酷投屏不了了(为什么优酷投屏到电视只能试看)

  • xsmax原装是无线耳机吗(xsmax用什么无线充电器好)

    xsmax原装是无线耳机吗(xsmax用什么无线充电器好)

  • rohs是什么牌子(rohs是什么牌子主板)

    rohs是什么牌子(rohs是什么牌子主板)

  • 红米k20升降摄像头容易坏吗(红米k20升降摄像头的声音是不是能关掉)

    红米k20升降摄像头容易坏吗(红米k20升降摄像头的声音是不是能关掉)

  • 版权限制无法投屏(版权限制无法投屏原理)

    版权限制无法投屏(版权限制无法投屏原理)

  • 钉钉笑脸墙在哪(钉钉笑脸墙在哪看)

    钉钉笑脸墙在哪(钉钉笑脸墙在哪看)

  • 苹果手机铃声删除教程(苹果手机铃声删除在哪里)

    苹果手机铃声删除教程(苹果手机铃声删除在哪里)

  • sourcemap文件泄露漏洞(source map)

    sourcemap文件泄露漏洞(source map)

  • 预缴增值税是否要预缴企业所得税
  • 公司两个股东各占50%股份,法人是股东
  • 发票开票地址是注册地址还是经营地址
  • 航天信息服务费不交可以吗
  • 增值税抵扣可以跨月吗
  • 费用怎么暂估
  • 企业所得税弥补亏损怎么算
  • 复利现值和复利终值的计算
  • 增值税已抵扣还能退税吗
  • 劳务费代驾计入什么科目?
  • 城建税及教育费附加计提表
  • 六税两费减半征收政策2022
  • 借款给其他公司的会计分录怎么写
  • 营业成本收入比
  • 利润减库存为什么不等于现金
  • 期交保费资金占用年限计算公式
  • 几年前的美元现在值钱吗
  • 外地职工医保怎么报销
  • 生产车间消耗品管理表
  • 应收款的周转天数
  • 第一次申领发票可以增额吗?
  • 最新早上好图片大全集
  • 其他资金结转结余包括哪些
  • 印花税的会计处理是什么
  • 母公司是否应替子公司承担违约责任
  • 合同的情势变更是什么
  • 如何更改windows用户名
  • PHP:curl_multi_add_handle()的用法_cURL函数
  • macOS Big Sur 11.1 RC预览版(20C69)正式更新
  • url传变量
  • 安个小窝
  • 在建工程转无形资产 会计准则
  • 采用权益法核算
  • thinkphp with
  • js fetch api
  • win11开机后开始菜单没反应
  • opencv讲解
  • python进行数学建模
  • 发票章没有盖好
  • 公司一季度报表
  • 织梦专题页模板
  • 季度所得税收入多报,年度可以调整吗
  • 非盈利机构怎么说
  • 残疾人就业保障金上年职工工资总额
  • 进项税额不得从销项税额中抵扣是什么意思
  • 金蝶利润表为什么只有累计数没有本月数
  • sqlserver导入导出数据库
  • 房地产增值税可以抵扣吗
  • 现行印花税税率是多少
  • 增值税留底注销时怎么办
  • 以前年度损益调整怎么做账
  • 以前年度损益调整账务处理分录
  • 投资损失如何入账
  • 汇算清缴前跨年调账怎么调
  • 出差费计入工资总额吗
  • 预付卡业务该如何管理
  • 研发费用如何做成本分析
  • 软件开发技术服务合同
  • 海量数据存储和查询
  • mysql8.0创建函数
  • vmware虚拟机找不到了
  • ug实体命令怎么使用
  • 解决ubuntu和win10关机重启界面不动
  • supporter5.exe - supporter5是什么进程
  • linux系统怎么更改语言
  • centos查看硬件设备
  • 安卓百分百
  • Unity3d Asset Serialization 设置错误导致SVN文件不能同步
  • bootstrap基础
  • js常用排序算法
  • nodejs mysql orm
  • javaScript NameSpace 简单说明介绍
  • AddForceAtPosition方法:增加刚体点作用力
  • 用一个简单的方法作文
  • js中onmouseover
  • python生产
  • 矿产资源税的计税依据
  • 收到税务局税收返还
  • 张雪峰谈建筑专业
  • 运输类增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设