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()方法

总结

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

相关文章

  • 全面剖析Vue3 全新特性 defineModel

    全面剖析Vue3 全新特性 defineModel

    defineModel是Vue3.4引入的一个编译器宏,用于简化组件双向数据绑定的实现,它是对v-model指令在组件上使用的语法糖,本文给大家介绍Vue3全新特性defineModel的相关知识,感兴趣的朋友一起看看吧
    2025-08-08
  • vue中使用heatmapjs的示例代码(结合百度地图)

    vue中使用heatmapjs的示例代码(结合百度地图)

    这篇文章主要介绍了vue中使用heatmapjs的示例代码(结合百度地图),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue.js使用computed属性实现数据自动更新

    Vue.js使用computed属性实现数据自动更新

    在Vue组件中,computed属性是在组件的选项对象中声明的,你可以把它们想象成组件的一个小功能,告诉Vue当某些数据变化时,如何更新界面,本文给大家介绍了Vue.js使用computed属性实现数据自动更新,需要的朋友可以参考下
    2024-06-06
  • 在Flask项目中集成并访问Vue前端项目的流程步骤

    在Flask项目中集成并访问Vue前端项目的流程步骤

    在现代 Web 开发中,前后端分离的架构模式越来越流行,前端通常使用 Vue、React 等框架开发,而后端则使用 Flask、Django 等框架提供 API 服务,本文将详细介绍如何在一个 Flask 项目中集成 Vue 前端项目,并确保能够正确访问和运行,需要的朋友可以参考下
    2025-03-03
  • Vue 动态添加表单实现动态双向绑定

    Vue 动态添加表单实现动态双向绑定

    动态表单是一个常见的需求,本文详细介绍了Vue.js中实现动态表单的创建,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-12-12
  • vue element ui validate 主动触发错误提示操作

    vue element ui validate 主动触发错误提示操作

    这篇文章主要介绍了vue element ui validate 主动触发错误提示操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 在Vue中使用mockjs代码实例

    在Vue中使用mockjs代码实例

    这篇文章主要介绍了在Vue中使用mockjs代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • Vue.directive 自定义指令的问题小结

    Vue.directive 自定义指令的问题小结

    这篇文章主要介绍了Vue.directive 自定义指令的问题小结,需要的朋友可以参考下
    2018-03-03
  • 跟混乱的页面弹窗说再见

    跟混乱的页面弹窗说再见

    这篇文章主要介绍了跟混乱的页面弹窗说再见,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 简述vue中的config配置

    简述vue中的config配置

    这篇文章主要介绍了vue中的config配置 ,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01

最新评论