前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案二：轮询去判断服务端的index.html是否跟当前的index.html的脚本hash值一样

原创

已于 2024-05-24 10:29:21 修改 · 4k 阅读

于 2023-11-27 10:09:45 首次发布

本文介绍了如何在使用Vue和Webpack构建的前端项目中，通过监测打包后script标签的hash值变化来实现部署后自动检测更新，并提示用户刷新页面。方法包括轮询服务器index.html文件的script数组对比和使用visibilitychange事件控制提示时机。

前言

当我们重新部署前端项目的时候，如果用户一直停留在页面上并未刷新使用，会存在功能使用差异性的问题，因此，当前端部署项目后，需要提醒用户有去重新加载页面。

技术框架

vue、js、webpack

解决方案

根据打完包之后生成的script src 的hash值去判断，每次打包都会生成唯一的hash值，只要轮询去判断不一样了，那一定是重新部署了
轮询（20s、自己设定时间）服务器的index.html 文件，将新的script数组与旧script数组比较数组内容是否一致（可以将新旧数组拼接后去重，若去重后的数组长度，与旧数组长度不一样，则说明重新部署了），若新旧数组不一致则通知用户刷新页面
通过监听visibilitychange事件，在页面隐藏时停止轮询，页面显示立马检测一次更新
检测到更新后，停止轮询

（感兴趣的还可去看方案一：编译项目时动态生成一个记录版本号的文件，轮询请求该文件。前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案一：编译项目时动态生成一个记录版本号的文件_新版本发布后,怎么用技术手段通知用户刷新页面?-CSDN博客）

效果

页面右下角提示更新：

代码实现

Step1：在src目录下封装 auto-update.js

/*
 * @Description: 自动更新
 */

// const timeData = 60 * 1000 // 检查间隔时间
const timeData = 20 * 1000 // 检查间隔时间
let hidden = false // 页面是否隐藏
let setTimeoutId
let needTip = true // 默认开启提示

let oldScript =

标签