vue打包项目版本号自加的操作步骤

 更新时间:2022年09月21日 14:17:48   作者:曦12  
项目每次打包后都需要改动项目版本号,这个改动每次都需要在package.json中修改version,比较麻烦,到底有没有一种打包后版本号自加的办法,这篇文章主要介绍了vue打包项目版本号自加的步骤,需要的朋友可以参考下

原因

项目每次打包后都需要改动项目版本号,这个改动每次都需要在package.json中修改version,比较麻烦,到底有没有一种打包后版本号自加的办法。

方案

版本号自加其实可以使用fs修改文件来实现的。
具体思路是:在执行打包命令npm run build时,同时执行一段js代码,该代码通过调用fs来自加修改package.json中的version,然后再进行打包操作。

步骤

1、在package.json中将scripts中的打包命令修改为如下:


2、在src下创建addVersion.js:

3、在addVersion.js中写入下面内容,打包时使用fs修改package.json:

//npm run build打包前执行此段代码
let fs = require('fs');
 
//返回package的json数据
function getPackageJson() {
  let data = fs.readFileSync('./package.json');//fs读取文件
  return JSON.parse(data);//转换为json对象
}
 
let packageData = getPackageJson();//获取package的json
let arr = packageData.version.split('.');//切割后的版本号数组
arr[2] = parseInt(arr[2]) + 1;
packageData.version = arr.join('.');//转换为以"."分割的字符串
//用packageData覆盖package.json内容
fs.writeFile(
  './package.json',
  JSON.stringify(packageData, null, "\t"
  ),
  (err) => { }
);

4、最后执行打包命令:npm run build便会发现package.json中的版本号变化了。

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

相关文章

  • vue懒加载和子组件懒加载的区别详解

    vue懒加载和子组件懒加载的区别详解

    这篇文章主要给大家介绍了vue懒加载和子组件懒加载有什么区别,Vue懒加载指的是对图片等资源的延迟加载,而子组件懒加载则是指延迟加载组件实例,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue实现物流时间轴效果

    vue实现物流时间轴效果

    这篇文章主要为大家详细介绍了vue实现物流时间轴效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue中input标签上传本地文件或图片后获取完整路径的解决方法

    vue中input标签上传本地文件或图片后获取完整路径的解决方法

    本文给大家介绍vue中input标签上传本地文件或图片后获取完整路径,如E:\medicineOfCH\stageImage\xxx.jpg,本文给大家分享完美解决方案,感兴趣的朋友跟随小编一起看看吧
    2023-04-04
  • Vue切换组件实现返回后不重置数据,保留历史设置操作

    Vue切换组件实现返回后不重置数据,保留历史设置操作

    这篇文章主要介绍了Vue切换组件实现返回后不重置数据,保留历史设置操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue侦测相关api的实现方法

    Vue侦测相关api的实现方法

    这篇文章主要介绍了Vue侦测相关api,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue的Scroll滚动事件触发方式

    Vue的Scroll滚动事件触发方式

    这篇文章主要介绍了Vue的Scroll滚动事件触发方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

    详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染,本篇文章主要介绍了详解Vue基于 Nuxt.js 实现服务端渲染(SSR),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • vue3监听resize窗口事件(离开页面要销毁窗口事件)

    vue3监听resize窗口事件(离开页面要销毁窗口事件)

    这篇文章主要给大家介绍了关于vue3监听resize窗口事件(离开页面要销毁窗口事件)的相关资料,vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可,需要的朋友可以参考下
    2023-11-11
  • 单页面vue引入百度统计的使用方法示例详解

    单页面vue引入百度统计的使用方法示例详解

    在网上各种找不到vue项目加入百度统计的代码与实现,自己探索出了一套加入百度统计的办法,下面这篇文章主要给大家介绍了关于单页面vue引入百度统计的使用方法,需要的朋友可以参考下
    2018-10-10
  • vue中methods、mounted等的使用方法解析

    vue中methods、mounted等的使用方法解析

    这篇文章主要介绍了vue中methods、mounted等的使用方法解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06

最新评论