前端页面部署更新之后,因为缓存问题,用户正在浏览的页面或者收藏夹中直接访问,页面在不刷新更新缓存的情况下,用户不知道页面是否有更新
解决方案:
服务端支持:
1.服务端给予一个版本号的返回接口,定时器轮询 时间长一些,询问是否更新
2.socket,推送消息
3.服务端做个中间件拦截用户一些请求,判断它携带的版本
不需要支持:
1.在编译的时候自己生成一个js文件,作为版本监控,然后前端用jsonp去请求这个js,判断是否有更新。
这里主要是前端不需要服务端支持的情况下
1.思路:在打包的时候,生成版本号,使用jsonp的方式请求获取版本号,
2.第二次有更新时,打包生成版本号与上一个版本进行对比,若不一样就提醒用户有更新,执行reload刷新页面,进而更新缓存
const fs = require('fs') const path = require('path') // 打包的时候生成版本号 if (isProduction) { var version1 = new Date().getTime() var content = "getVersion('" + version1 + "')" //打包之后的地址 fs.writeFile(path.join(__dirname, `/public/common`) + "/version.js", content, function (err) { if (err) { return console.log(err); } console.log("The file was saved!"); }); }
直接在main.js中引入js代码 import Vue from 'vue' if (process.env.NODE_ENV === 'production') { setInterval(() => { // 重复创建script标签,先删除 const preScript = document.getElementsByTagName("script")[0]; const preSrc = preScript.src; const parentNode = preScript.parentNode if (preSrc.includes('version')) { parentNode.removeChild(preScript) } const versionScript = document.createElement("script"); // todo 注意路径问题 versionScript.src = '/openweb/common/version.js?v=' + new Date().getTime(); const s = document.getElementsByTagName("script")[0]; parentNode.insertBefore(versionScript, s); // 插入到head标签中 layout.js前 window.getVersion = version => { if ((localStorage.frontendVersion && version !== localStorage.frontendVersion) || (window.frontendVersion && version !== window.frontendVersion)) { console.log('localStorage.frontendVersion', localStorage.frontendVersion); console.log('version', version); Vue.prototype.$confirm({ title: '页面有更新,确定要更新吗?', onOk() { location.reload() }, onCancel() {}, }); } localStorage.frontendVersion = version; // 保存 以便下次使用判断 window.frontendVersion = version; // 保存 以便下次使用判断 } }, 10000); }