在线建设网站制作,做招聘网站的背景图片,自媒体网站大全,南京最新消息今天以下只是一些思路#xff0c;有更好的实现方式可以留言一起交流学习
方式一#xff1a;纯前端 在每次发布前端时#xff0c;使用webpack构建命令生成一个json文件#xff0c;json中写个随机生成的一个字符串#xff08;比如时间戳#xff09;#xff0c;每次打包程序都…以下只是一些思路有更好的实现方式可以留言一起交流学习
方式一纯前端 在每次发布前端时使用webpack构建命令生成一个json文件json中写个随机生成的一个字符串比如时间戳每次打包程序都会自动更新这个json文件。 在项目中通过定时任务或者在切换页面路由时请求json文件。使用本地保存的上一次生成的字符串和json文件中的字符串进行比较如果两个字符串不一样则说明前端重新部署了提醒用户进行更新或进行强制刷新的操作。
方式二前后端配合 在每个请求的header里面加上发版版本号和保留在客户端的上一次版本号进行比较如果不一致则强制刷新刷新后保存当前版本号。或者单独写一个返回版本号的接口
下面重点说一下纯前端如何做
①webpack构建 生成一个json文件在项目目录下新建plugin文件夹新建version-webpack-plugin.js如下
/** 自定义的插件: 生成版本号json文件 */
const fs require(fs);
class VersionPlugin {apply(compiler) {// emit 是异步 hook使用 tapAsync 触及它还可以使用 tapPromise/tap(同步)compiler.hooks.emit.tap(Version Plugin, (compilation) {const outputPath compiler.path || compilation.options.output.path;const versionFile outputPath /version.json;const timestamp Date.now(); // 时间戳作为版本号const content {version: ${timestamp}};/** 如果路径存在则返回 true否则返回 false。 */if (!fs.existsSync(outputPath)) {// 同步地创建目录。 返回 undefined 或创建的第一个目录路径如果 recursive 为 true。 这是 fs.mkdir() 的同步版本。fs.mkdirSync(outputPath, { recursive: true }); }// 生成json文件fs.writeFileSync(versionFile, content, {encoding: utf8,flag: w,});});}
}module.exports { VersionPlugin };
②在vue.config.js中使用者个 plugin
const { VersionPlugin } require(./plugin/version-webpack-plugin.js); ③在每次执行webpack构建命令都会在dist目录下生成一个version.json文件里面有一个字段叫 version值是构建时的时间戳每次构建都会生成一个新的时间戳。 ④发起ajax请求请求version.json文件获取version时间戳和本地保存的上一次的时间戳做比较如果不一样则进行对应的操作。
import axios from axios
import {MessageBox} from element-ui
export function reloadVersion() {axios.get(window.location.origin /plm/version.json?v Date.now()).then(rsp {let localVersion localStorage.getItem(localVersion)let onlineVersion rsp.data.versionif(onlineVersion){if(localVersion!onlineVersion){// 弹框提示更新MessageBox.confirm(有版本更新是否刷新确保获取最新数据?, 版本更新, {confirmButtonText: 更新,cancelButtonText: 取消,type: warning}).then(() {// 发版版本号和本地版本号不一致保存最新的版本号到本地并刷新页面获取最新的页面localStorage.setItem(localVersion,onlineVersion)window.location.reload();})}}})
}
⑤请求发起的时机可以使用定时器或者在切换页面的时候进行校验版本。根据自己的实际情况选择合适的调用时机。
二通过监听网页端的报错进行相应的处理。
如果是覆盖式的更新有可能发版前就已经删除了上一个版本的dist文件会造成缓存的页面依然调用已经被删除的文件所以会白屏报错。报错就有可能不会执行到上面发起请求获取版本号的操作。所以如果监听到如下的几种报错可以进行刷新页面的操作 在index.html根目录文件中加入如下代码。为了防止页面一直刷新所以加了一个超过次数就不再继续刷新的逻辑 script// 错误监听window.addEventListener(error, (e) {console.log(globalErrore)// 类似manifest.js和app.js等静态资源报错if(e.target.outerHTML.indexOf(js/manifest.) ! -1 || e.target.outerHTML.indexOf(js/app.) ! -1|| e.target.outerHTML.indexOf(js/chunk-) ! -1){var errorTime sessionStorage.getItem(mainAppErrorTime)if(errorTimeerrorTime0){errorTime} else{errorTime 1}var timer setTimeout(function() {// 错误次数存在缓存刷新超过3次不会继续刷新。退出页面重进后次数重置sessionStorage.setItem(mainAppErrorTime, errorTime)window.location.reload()}, 1000);if(errorTimeerrorTime3){clearTimeout(timer) // 清空定时器}}}, true);/script
