1.项目使用的是git所以使用git仓库的短哈希作为版本更新标识，将该字符写入public文件，此处需要注意后端访问静态资源的路径。
在vue.config.js文件中写入
function excuteVersion() {const fs = require('fs')const { execSync } = require('child_process')
// 获取当前Git仓库的短提交哈希，将其存储在cmtId变量中const cmtId = execSync('git rev-parse --short HEAD').toString().trim()
// 将cmtId写⼊到public⽬录下的v.txt⽂件中const versionFile = path.join(process.cwd(), 'public/static/market', 'version.txt')fs.writeFileSync(versionFile, cmtId)
}excuteVersion()
写入后 监听后端socket的版本更新消息通知
创建一个ts文件监听消息
export function wsListenVersion() {const wsStore = useWsStore();wsStore.on(WS_EVENT.VERSION_UPDATE,(data)=>{wsLogger(WS_STATUS.RECEIVED, WS_EVENT.VERSION_UPDATE, data);if (data.code === HTTP_CODE.SUCCESS) {showUpdateModal(data.data.new)}})
}
设置通知的样式
export function showUpdateModal(newCommitId: string) {const key = `open${newCommitId}`;notification.open({message: "页面已经发生了更新",description:"检测到当前页面内容已经发生了更新，请刷新页面后使用！",btn: () =>h(Button,{type: "primary",size: "small",onClick: () => {window.location.reload();notification.close(key);}},{default: () => "刷新"}),key,placement: "bottomRight"});
}
在首页加载创建socket连接成功后监听该通知
onMounted(()=>{
// 登录后初始化socket连接initWs()
})function initWs(): Promise<void> {return new Promise<void>(resolve => {wsStore.connect().then(() => {wsListenVersion();resolve();}).catch(reason => console.log("[ERROR][WS]", reason));});
}
以上通过学习参考该文章
https://blog.csdn.net/Ljq1041054607/article/details/140955141
