问题背景
网站更新后,解决了某些bug,但是用户未刷新网页,还在浏览网站更新前内容……
然后用户说:“bug根本没解决啊!”
我说:“你刷新下页面啊”
用户说:“嗯,好了”
那么,有没有一种方式,可以直接通知用户网站有更新,提示用户主动刷新页面呢?
有!当然有
说明
本项目以vue2举例,其他的Vue3、React等,请自行实现。
假设你基于git提交代码,以下从git的commit head中获取唯一值
(注:或者其他可行方式替代,自行实现)
解决方案 - 纯前端检测
还有其他解决方案,如:从服务器获取版本号,轮询查询等。
但上述都有性能问题、或需要服务端配合、或需要添加一些配置项,显得麻烦,读者可自行选择
1.生成唯一标识
在vue打包的时候,编写一个脚本,存储提交的commit head作为hash值,也就是唯一标识。
在vue.config.js的同级,新建一个release.js文件:
const execSync = require('child_process').execSync;
const fs = require('fs');
const path = require('path');
const dirName = path.dirname(__filename);
// 执行git命令,获取当前HEAD指针所指向的提交的完整哈希值
const gitHead = execSync('git rev-parse HEAD', {
cwd: path.resolve(dirName, './')
}).toString().trim()
// 只取前十个数字或字母
const hash = gitHead.substring(0, 10);
// 版本号:时间戳+git的hash值
const version = Date.now() + '_' + hash;
// .env.production文件路径
const envFile = path.join(dirName, './.env.production');
// 读取目标文件,并通过正则判断.env.production文件中是否有VITE_APP_VERSION开头的环境变量
try {
const data = fs.readFileSync(envFile, {
encoding: 'utf-8',
});
const reg = /VUE_APP_VERSION=\d+_[\w-_+:]{7,14}/g;
const releaseStr = `VUE_APP_VERSION=${version}`;
let newData = '';
if (reg.test(data)) {
newData = data.replace(reg, releaseStr);
fs.writeFileSync(envFile, newData);
} else {
newData = `${data}\n${releaseStr}`;
fs.writeFileSync(envFile, newData);
}
console.log(`插入release版本信息到 env.production 完成,版本号:${version}`);
} catch (e) {
console.error(e);
}
上述代码,把提交的git commit head值取前10位数,再加上时间戳组成hash值。
并且把该值写入.env.production文件,变量名为VUE_APP_VERSION
2.hash对比
用户登录的时候,把版本号的hash值本地存储
import Cookies from "js-cookie";
Cookies.set('app_version', process.env.VUE_APP_VERSION)
然后在路由守卫中,比较缓存值app_version、与当前获取的
process.env.VUE_APP_VERSION值是否相等
- 相等:说明没更新,
- 不相等:则说明网站更新了,因为网站发布后会重新生成一个VUE_APP_VERSION值,那么这时候就要提示用户更新了
路由守卫permisssion.js的关键代码如下
import Cookies from "js-cookie";
import { Message, MessageBox } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
// 是否首次进入网页,首次不校验刷新
let isFirstEntry = true;
// 检测网站更新
function checkUpdate() {
// 系统的版本号
const system_app_version = process.env.VUE_APP_VERSION
// 浏览器的版本号
const web_app_version = Cookies.get('app_version')
if(isFirstEntry) {
isFirstEntry = false
} else {
// 如果不存在系统的版本号,则设置系统版本号,第一次不提示刷新,否则换个浏览器又提示了
if(!web_app_version) {
Cookies.set('app_version', system_app_version)
} else {
// 如果浏览器的版本号不等于系统的版本号,则重设浏览器的版本号,并提示刷新
if (system_app_version !== web_app_version) {
console.log('版本号不一致')
refreshTip(system_app_version)
}
}
}
}
// 刷新提示
function refreshTip(system_app_version) {
MessageBox.confirm('当前网站内容有更新,是否刷新页面?', '提示', {
confirmButtonText: '立即刷新',
cancelButtonText: '忽略',
type: 'warning'
}).then(() => {
Cookies.set('app_version', system_app_version)
window.location.reload()
}).catch(() => {
console.log('取消了')
Cookies.set('app_version', system_app_version)
})
}
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
/* has token*/
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
// 只在生产环境检测是否有版本更新
if(process.env.NODE_ENV === 'production') {
checkUpdate()
}
}
}
上述方法是在在用户切换菜单时,监听路由变化来检测是否更新,这是比较常用的方法。
此外,有的人会轮询检测是否有更新,这样会损耗性能且不优雅。
请读者自行选择触发的时机。
最后
最后,在打包时,修改一下打包命令,执行release.js并打包
修改package.json文件:
'scripts': {
"build:prod": "node ./release.js && vue-cli-service build",
}
恭喜你,大功告成了!
关于作者
作者在CSDN社区叫:“前端没钱”
CSDN主页地址:
https://blog.csdn.net/yan1915766026
作者是前端开发人员,会经常发布一些好用的工具、方法,并且持续更新《若依nodejs全栈教程》希望帮助更多的前端开发人员。
感谢关注!