首页 > 其他分享 >vue项目npm run build的时候自动更新package.json中的version

vue项目npm run build的时候自动更新package.json中的version

时间:2024-02-26 13:55:06浏览次数:26  
标签:npm vue const package 版本号 json version build 自动更新

在vue项目最外侧新增一个addVersion.js 脚本,脚本中编写逻辑来解析当前的版本号

// addVersion.js  
const fs = require('fs');  
const path = require('path');  
  
const packageJsonPath = path.join(__dirname, 'package.json');  
  
try {  
  // 读取 package.json 文件内容  
  const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8');  
  const packageJson = JSON.parse(packageJsonContent);  
  
  // 解析版本号  
  const versionParts = packageJson.version.split('.');  
  const major = parseInt(versionParts[0], 10);  
  const minor = parseInt(versionParts[1], 10);  
  const patch = parseInt(versionParts[2], 10);  
  
  // 根据需要自增版本号  
  // 例如,这里我们仅对补丁版本号进行自增  
  patch += 1;  
  
  // 构建新的版本号  
  const newVersion = `${major}.${minor}.${patch}`;  
  
  // 更新 package.json 中的版本号  
  packageJson.version = newVersion;  
  
  // 将更新后的内容写回 package.json 文件  
  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));  
  
  console.log(`New version set to: ${newVersion}`);  
} catch (error) {  
  console.error('Error updating version:', error);  
}
 

然后,你可以像之前一样在 package.json 的 scripts 部分修改build命令来运行这个脚本:

	"scripts": {
		"start": "npm run serve",
		"build": "node ./src/addVersion.js && vue-cli-service build",
	}

当你运行 npm run build 时,它将会先执行 add-version 脚本以增加版本号。

另外,有的系统可能希望获取当前的年月日作为第3位,那么修改addVersion.js中的逻辑,新增方法getCurrentDateString。

function getCurrentDateString() {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  const currentDateAsString = `${year}${month}${day}`;
  return currentDateAsString;
}

然后在patch赋值那边,获取getCurrentDateString的值即可。

const patch = this.getCurrentDateString();

  

标签:npm,vue,const,package,版本号,json,version,build,自动更新
From: https://www.cnblogs.com/jishugaochao/p/18034184

相关文章

  • Vue实现图片瀑布流
    在线演示地址:点击前往一,创建一个Waterfall组件代码如下:<template><divclass="waterfall"><!--循环渲染每一列--><divclass="waterfall-column"v-for="(column,index)incolumns":key="index"><!--......
  • 如何创建vue项目,创建的方式?
    如何创建vue项目,创建的方式:https://blog.csdn.net/weixin_73184582/article/details/130241224?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAvue%E9%A1%B9%E7%9B%AE&utm_medium=distribute.pc_search_result.none-task-bl......
  • uniapp-vue2-微信小程序,canvas 裁切图片的代码
    <canvasclass="edit-question-canvas"type="2d"id="canvasCuteImage"></canvas>/*.edit-question-canvas{position:absolute;left:-750rpx;width:690rpx;height:100rpx;}样式随便自己写*/......
  • 详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
    详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia):https://blog.csdn.net/qq_44423029/article/details/126378199?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170891147716800185818285%2522%252C%2522scm%2522%253A%252220140713.130102334..%2......
  • vue3+vite使用vue-pdf-embed或者pdf-vue3预览 PDF 文件(能躲避 XSS 攻击,需要 pdf 文件
    1.使用vue-pdf-embed1.npm安装所需插件[email protected]@0.1.62.封装组件(创建pdfPriview.index文件)<template><divclass="pdf-preview"> <vue-pdf-embed :source="state.source" v-for="pageinstate......
  • vue init webpack 和vue create的几点区别
    vueinitwebpack和vuecreate的几点区别:https://blog.csdn.net/xilejie/article/details/130061075?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170891269616800184194526%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request......
  • Vue 3 的 setup语法糖到底是什么东西?
    前言我们每天写vue3项目的时候都会使用setup语法糖,但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的?为什么在setup顶层定义的变量可以在template中可以直接使用?为什么import一个组件后就可以直接使用,无需使用components 选项来显式注册组件?vue文件如何渲染......
  • 使用defineAsyncComponent解决Vue3中的动态组件不显示问题
    参考:https://www.php.cn/faq/562208.html之前的写法<component:is='xxx'></component>异步加载组件<template><AsyncComponentv-if="item.data":key="item.data.comId"></AsyncComponent></template>&......
  • Vue3学习(十八) - TreeSelect 树选择
    写在前面本以为可以在家学习一天,结果家里来了客人拜年,就没学习上,有点小遗憾吧。昨天完成从分类管理的前后端代码复制出文档管理的前后端代码,遗留问题是只能选择一级父分类。值得说的是,昨晚的遗留的问题修复了,开心。遗留问题点击父文档,弹出警告,从报错来看那意思就是parent应该......
  • 【vue3】【router】跳转页面渲染两次问题
    最近做一款毕设遇到一个问题:如图所示部分是因为渲染了两次组件导致执行了两次onMounted加载了相同数据。 router.ts以下是我的路由相关配置: default布局:keepalive App.vue 最后导致这个原因正是因为布局组件default.vue和App.vue同时使用了keepalive,只要任意一边取消......