vue3提示用户版本更新方式

 更新时间:2024年12月26日 14:56:00   作者:张小伟i  
本文介绍了如何在项目中创建和使用自定义插件,以在构建过程中检查版本号,具体步骤包括在项目根目录下创建buildLifeHook.ts文件,并在public目录下创建version文件夹,然后在vite.config.ts中引用该插件,并在src/utils目录下创建XxzUtils.ts文件

vue3提示用户版本更新

1.项目根目录下创建myPlugins/buildLifeHook.ts

在public下创建version文件夹

  • buildLifeHook.ts代码
import fs from 'fs';
import path from 'path';

// 在Vite配置中添加一个插件,监听build事件
export function buildLifeHook() {
  return {
    name: 'build-life-hook',
    buildStart(){
      let now = new Date().toLocaleString().replace(/\//g,'-')
      let version = {
        version:now,
      }
      let versionPath = path.join(__dirname,'../public/version/versionData.json');
      fs.writeFile(versionPath,JSON.stringify(version),'utf8',(err)=>{
        if(err){
          console.log('写入文件失败',err);
        }else{
          console.log('写入文件成功');
        }
      })
      // console.log('构建开始!' + now);
    },
    buildEnd() {
      let now = new Date().toLocaleString().replace(/\//g,'-')
      // console.log('构建完成!' + now);
    },
  };
}

2.在vite.config.ts中引用插件

3.在src/utils下创建XxzUtils.ts

  • XxzUtils.ts中代码
/**
 * 版本更新
 */
/**
 * @description 检测版本更新
 * @param allowIgnore 是否允许忽略
 * @param timer 传入定时器
 * @returns
 */
export async function checkUpdate(allowIgnore: boolean, timer?: any) {
  //动态获取线上的资源地址,其实就是vite.config.ts的base的值
  try {
    // 检测前端资源是否有更新
    let response = await fetch(`/version/versionData.json`, {
      headers: {
        'Cache-Control': 'no-cache'
      }
    }).then(res => res.json())
    if (!localStorage.getItem('JHS_version')) {
      localStorage.setItem('JHS_version', response.version)
    } else {
      if (localStorage.getItem('JHS_version') !== response.version) {
        if (versionUpdateTimer != null) {
          clearInterval(versionUpdateTimer)
        }
        ElMessageBox.confirm(
          '是否刷新页面重新加载最新版?',
          '检测到新版本',
          {
            confirmButtonText: '好的',
            cancelButtonText: '不了',
            type: 'warning',
            showClose: false,
            closeOnClickModal: false
          }
        )
          .then(() => {
            localStorage.setItem('JHS_version', response.version)
            window.location.reload()
          })
      }
    }
  } catch (e) {
    return Promise.reject(e)
  }
}

/**
 * @description 初始化版本检测器
 */
let versionUpdateTimer = null

export function initVersionCheck() {
  versionUpdateTimer = setInterval(() => {
    checkUpdate(true, versionUpdateTimer).then(r => null)
  }, 60000)
}

4.在App.vue文件下调用initVersionCheck()方法

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue编程格式化代码属性自动换行问题

    Vue编程格式化代码属性自动换行问题

    这篇文章主要为大家介绍了Vue编程格式化代码属性及自动换行问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 关于Vue Router的10条高级技巧总结

    关于Vue Router的10条高级技巧总结

    这篇文章主要给大家总结介绍了关于Vue Router的10条高级技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Vue自定义元素身上的右键事件问题

    Vue自定义元素身上的右键事件问题

    这篇文章主要介绍了Vue自定义元素身上的右键事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 使用vant 自定义弹框全过程

    使用vant 自定义弹框全过程

    这篇文章主要介绍了使用vant 自定义弹框全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 详解vue中多个有顺序要求的异步操作处理

    详解vue中多个有顺序要求的异步操作处理

    这篇文章主要介绍了vue中多个有顺序要求的异步操作处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue.js页面验证跳转功能实现

    Vue.js页面验证跳转功能实现

    这篇文章主要介绍了Vue.js页面验证跳转功能实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • vue使用canvas的教程详解

    vue使用canvas的教程详解

    Vue.js 是一个流行的 JavaScript 框架,用于构建用户界面,它提供了一种简洁的方式来管理和渲染数据,同时也支持与其他库和工具的集成,本文主要来和大家聊聊如何在vue中使用canvas,有需要的可以参考下
    2023-09-09
  • vue-cli脚手架创建项目遇到的坑及解决

    vue-cli脚手架创建项目遇到的坑及解决

    这篇文章主要介绍了vue-cli脚手架创建项目遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue-router的hooks用法详解

    vue-router的hooks用法详解

    这篇文章主要介绍了vue-router的hooks用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • Vue3+ElementPlus封装图片空间组件的门面实例

    Vue3+ElementPlus封装图片空间组件的门面实例

    图片空间是用于管理上传图片的工具,可以让用户方便地存储、管理和调用图片,提高工作效率,它通常具备多样的样式,但操作入口统一,便于使用,通过图片空间组件,用户能直接在其他模块(例如商品图片)中选择所需图片
    2024-09-09

最新评论