vue项目打包自动更新版本号且自动刷新缓存的方法示例

 更新时间:2024年11月23日 15:26:59   作者:Faaaaaaq  
这篇文章主要给大家介绍了关于vue项目打包自动更新版本号且自动刷新缓存的相关资料,文中通过代码及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下

在项目根目录创建一个 version.js 文件!

const fs = require('fs');
const path = './package.json';

function getPackageJson() {
    return JSON.parse(fs.readFileSync(path));
}

try {
    let packageJson = getPackageJson();
    let version = packageJson.version;
    // 去除前缀 v
    if (version.startsWith('v')) {
        version = version.slice(1);
    }
    let arr = version.split('.').map(item => {
        let num = Number(item);
        if (isNaN(num)) {
            throw new Error(`Invalid version number part: ${item}`);
        }
        return num;
    });

    if (arr[2] < 9) {
        arr[2] += 1;
    } else if (arr[1] < 9) {
        arr[1] += 1;
        arr[2] = 0;
    } else {
        arr[0] += 1;
        arr[1] = 0;
        arr[2] = 0;
    }

    const newVersion = 'v' + arr.join('.');
    packageJson.version = newVersion;

    fs.writeFileSync(path, JSON.stringify(packageJson, null, 2));
    console.log(`Version updated to ${newVersion}`);
	} catch (error) {
	    console.error('Failed to update package.json:', error);
	    process.exit(1);
	}

在项目package.json配置基础版本号

继续在package.json文件的打包命令里添加执行version代码

可以先到运行serve里面添加执行version代码查看package.json里的版本号是否生效

在这里插入图片描述

main.js里面添加清除缓存,刷新代码;简单粗暴

const version = require('../package.json').version
const versionStorage = localStorage.getItem('version')
if (version != versionStorage) {
  localStorage.clear()
  localStorage.setItem('version', version)
  setTimeout(() => {
    window.location.reload(true)
  }, 500)
}

总结 

到此这篇关于vue项目打包自动更新版本号且自动刷新缓存的文章就介绍到这了,更多相关vue项目打包自动更新版本号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue登录页面回车执行事件@keyup.enter.native问题

    vue登录页面回车执行事件@keyup.enter.native问题

    这篇文章主要介绍了vue登录页面回车执行事件@keyup.enter.native问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • el-form组件清除校验提示正确方法(前端技能提升)

    el-form组件清除校验提示正确方法(前端技能提升)

    el-form组件提供了表单验证的功能,可以通过在el-form上绑定rules属性,并在el-form-item上设置prop属性来进行校验,这篇文章主要给大家介绍了关于el-form组件清除校验提示正确方法(前端技能提升)的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue自定义指令实现仅支持输入数字和浮点型的示例

    vue自定义指令实现仅支持输入数字和浮点型的示例

    今天小编就为大家分享一篇vue自定义指令实现仅支持输入数字和浮点型的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue eslint报错error "Component name "*****" should always be multi-word"解决

    vue eslint报错error "Component name "*****"

    这篇文章主要给大家介绍了关于vue eslint报错error “Component name “*****“ should always be multi-word”的解决方法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 15个Vue技巧,你都知道吗

    15个Vue技巧,你都知道吗

    在使用 Vue 开发的这几年里,掌握一些有用的技巧,使用一些更高级的技术点,总会有用的,本文就介绍了15个Vue技巧,具有一定的参考价值,感兴趣的可以了解一下
    2022-02-02
  • Vue中使用Lodash的实现示例

    Vue中使用Lodash的实现示例

    本文主要介绍了Vue中使用Lodash的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue iview实现分页功能

    vue iview实现分页功能

    这篇文章主要为大家详细介绍了vue iview实现分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue调用swiper插件步骤教程(最易理解且详细)

    vue调用swiper插件步骤教程(最易理解且详细)

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下
    2023-04-04
  • 解决vuejs 使用value in list 循环遍历数组出现警告的问题

    解决vuejs 使用value in list 循环遍历数组出现警告的问题

    今天小编就为大家分享一篇解决vuejs 使用value in list 循环遍历数组出现警告的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • VUE中Non-Props属性的使用

    VUE中Non-Props属性的使用

    本文主要介绍了VUE中Non-Props属性的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05

最新评论