代做效果图网站,网页生成快捷方式带图标,湖北搜索引擎推广多少钱,网站开发及app开发报价单前言
当我们重新部署前端项目的时候#xff0c;如果用户一直停留在页面上并未刷新使用#xff0c;会存在功能使用差异性的问题#xff0c;因此#xff0c;当前端部署项目后#xff0c;需要提醒用户有去重新加载页面。 技术框架
vue、js、webpack 解决方案
编译项目时动…前言
当我们重新部署前端项目的时候如果用户一直停留在页面上并未刷新使用会存在功能使用差异性的问题因此当前端部署项目后需要提醒用户有去重新加载页面。 技术框架
vue、js、webpack 解决方案
编译项目时动态生成一个记录版本号的文件轮询20s、自己设定时间这个文件判断版本号有新版本则通知用户刷新页面通过监听visibilitychange事件在页面隐藏时停止轮询页面显示立马检测一次更新检测到更新后停止轮询 感兴趣的可去看方案二根据打完包之后生成的script src 的hash值去判断每次打包都会生成唯一的hash值只要轮询去判断不一样了那一定是重新部署了。 效果
页面右下角提示更新 代码实现 Step1在 vue.config.js 实现动态创建版本号文件 if (process.env.VUE_APP_ENV ! production) {
// 这里我设置的是只在非生产环境自动检测更新生成version
// 想要所有环境都自动检测更新只要写if(process.env.VUE_APP_ENV ! production)内的内容就好const { writeFile, existsSync } require(fs)// 动态生成版本号const createVersion () {//检测目录是否存在if (existsSync(./public)) {writeFile(./public/version.json, {version:${Date.now()}}, (err) {if (err) {console.log(写入version.json失败)console.log(err)} else {console.log(写入version.json成功)}})} else {setTimeout(createVersion, 1000)}}setTimeout(createVersion, 10000)
} Step2在src目录下封装 auto-update.js /** Description: 自动更新*/let currentVersion // 当前版本
let version // 新版本
// const timeData 60 * 1000 // 检查间隔时间
const timeData 20 * 1000 // 检查间隔时间
let hidden false // 页面是否隐藏
let setTimeoutId
let needTip true // 默认开启提示// 获取版本号
const getVersion async () {return fetch(/version.json?timestep Date.now()).then((res) res.json())
}// 检查更新
const checkUpdate async () {console.log(***************checkUpdate**************)const currentVersion sessionStorage.getItem(version)version (await getVersion()).version// 本地没有 version表示刚进入系统直接塞值if (!currentVersion) return sessionStorage.setItem(version, version)console.log( ~ file: auto-update.js:19 ~ version:, version)console.log( ~ file: auto-update.js:21 ~ currentVersion:, currentVersion)console.log( ~ file: auto-update.js:23 ~ Number(version) ! Number(currentVersion):, Number(version) ! Number(currentVersion))let needRefresh falseif (Number(version) ! Number(currentVersion)) {console.log(%c 发现新版本~~~~~~, color: red)needRefresh true}return needRefresh
}// 自动更新
const autoUpdate async () {setTimeoutId setTimeout(async () {// 页面隐藏了就不检查更新if (!hidden) {const willUpdate await checkUpdate()console.log( ~ file: auto-update.js:71 ~ setTimeoutIdsetTimeout ~ willUpdate, version:, willUpdate, version)if (willUpdate needTip) {// 延时更新防止部署未完成用户就刷新空白setTimeout((){// ----弹框确认---先简单点弹框确认可以用注释内的跳过右下角通知的内容Step3、4// const result confirm(发现新版本点击确定更新)// if (result) {// sessionStorage.setItem(version, version)// location.reload() // 刷新当前页// }// --------------//*****右下角通知提示 */window.dispatchEvent(new CustomEvent(onmessageUpdate, {detail: {msg: 发现系统版本更新请刷新页面~,version: version},}))//******************* */}, 10000)needTip false // 关闭更新提示防止重复提醒}}console.log( ~ file: auto-update.js:90 ~ autoUpdate ~ needTip: , needTip)if (needTip) {console.warn(needTip autoUpdate);autoUpdate()}}, timeData)
}// 停止检测更新
const stop () {if (setTimeoutId) {clearTimeout(setTimeoutId)setTimeoutId }
}// 开始检查更新
const start async () {// currentVersion (await getVersion()).versionautoUpdate()// 监听页面是否隐藏document.addEventListener(visibilitychange, () {hidden document.hiddenconsole.log( ~ file: auto-update.js:64 ~ document.addEventListener ~ hidden, needTip:, hidden, needTip)// 页面隐藏了就不检查更新。或者已经有一个提示框了防止重复提示。if (!hidden needTip) {autoUpdate()} else {stop()}})
}export default { start } Step3编写模板 CnNotify.vue 文件 templatediv classcn_notifydiv classcontenti classel-icon-message-solid/i{{ msg }}/divdiv classfooterel-row classbtnBoxel-button typeprimary clickonSubmit确认刷新/el-buttonel-button clickcancle我知道了/el-button/el-row/div/div
/template
script
export default {props: {msg: {type: String,default: ,},version: {type: String,default: ,},},data() {return {};},created() {},methods: {// 点击确定更新onSubmit() {sessionStorage.setItem(version, this.version) // 存入版本versionlocation.reload() // 刷新},// 关闭cancle() {this.$parent.close();},},
};
/script
style langscss scoped
.cn_notify {.content {padding: 20px 0;}.footer {display: flex;justify-content: center;}
}
/style
style langscss
.versionNotifyStyle {.el-notification__content {width: 280px !important;}
}
/styleStep4app.vue 使用组件CnNotify templatediv idapprouter-view //div
/templatescript
// 引入CnNotify组件
import CnNotify from /components/common/CnNotify/index.vue
export default {name: App,components: {CnNotify, // 注册组件},mounted() {this.watchUpdate()},methods: {watchUpdate() {window.addEventListener(onmessageUpdate, (res) {console.log( ~ file: App.vue:20 ~ window.addEventListener ~ res:, res)let msg res.detail.msg,version res.detail.versionthis.$notify({title: 版本更新提示,duration: 0,position: bottom-right,dangerouslyUseHTMLString: true,message: this.$createElement(CnNotify, {// 使用自定义组件ref: CnNotify,props: {msg: msg,version: version},}),customClass:versionNotifyStyle, //自定义类名})})},},
}
/scriptStep5在 main.js 内使用 // 引入自动更新提醒
import autoUpdate from ./auto-update
// 非生产环境使用
process.env.VUE_APP_ENV ! production autoUpdate.start()
