前言
大家好，好久没见，最近和大学同学一起在赚外快，搞一套简单的商城的东西，也是赚了万把块钱，就没更新博客，现在项目到收尾阶段了，博客也就重新开始更新，本篇文章记录一下一个简单的前端更新提示的逻辑。
实现逻辑
我们都知道，vue项目打包之后的index.html是基本这样的一个文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="./logo.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>管理系统</title>
<script type="module" crossorigin src="./assets/index-f4cbc7d5.js"></script>
<link rel="stylesheet" href="./assets/index-281dda9e.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
|
每一次更新，我们的script标签和link后面的地址是不一样的，那我们就可以根据这个来进行判断页面是否更新了。
实现
创建autoUpdate.js
这里我用了tdesign的弹窗组件，你也可以用自己的，本质上我们需要检测的是script标签的内容，我们可以搞简单点，直接比对html的内容即可。
- 这里因为我这个项目打包之后的目录，在服务器上是在
bonded-area-web目录下面的，所以加了这个，你可以根据实际情况调整。
- 我们测试本地环境是不需要检测这个东西，因此可以加上
process.env.NODE_ENV === 'production'线上环境的判断。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| import { DialogPlugin } from "tdesign-vue-next";
let oldHtml = '';
let dia=null
async function fetchHtml() {
return await fetch(`/bonded-area-web?timestamp=${+new Date()}`)
.then(res => res.text())
}
async function needUpdate() {
const newHtml = await fetchHtml()
let result = false
if (oldHtml && oldHtml !== newHtml) {
result = true
}
oldHtml = newHtml
return result
}
function autoRefresh() {
setTimeout(async () => {
if (await needUpdate()&&!dia) {
dia=DialogPlugin.alert({
header: '提示',
body: '检测到有新版本，点击确定刷新',
onConfirm: () => {
dia.hide()
location.reload()
}
})
}
autoRefresh()
}, 10000)
}
if (process.env.NODE_ENV === 'production'){
autoRefresh()
}
|
入口文件导入
然后在入口文件main.js导入即可。
结语
本篇文章就简单到这里了，更多内容敬请期待，债见~
.gif)
