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打包项目图片等静态资源的处理
项目打包,默认是打包在根目录下面的.当然我们可以通过设置,打包到任意子目录中去. 但是,当项目中引入资源的,比如:引入图片资源.js资源.或者字体图标之类的.那么可能在这个中间又会踩坑. 1.在vue ...
- vue打包项目后使用-webkit-line-clamp: 2;这个属性不生效?
在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法: word-break: break-all; text-overflow: ellipsis; di ...
- vue项目首屏加载优化实战
问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...
- webpack 打包和手动创建一个vue的项目
首先我们为啥要用webpack,为啥不用其他的打包的工具. 先听我捋捋, Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片. ...
- 将vue的项目打包后通过百度的BAE发布到网上的流程
经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. ...
- 基于Vue + webpack + Vue-cli 实现分环境打包项目
需求由来:我公司项目上线发布至服务器分为三个环境分别为测试环境.预发布环境.生产环境:前期做法是项目通过脚步打包时由脚步把域名和后缀名之类的全部替换成要发布的环境所需要的,因为我公司的项目比较大由许许 ...
- Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- vue.js项目打包上线
最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架 ...
- 【vue】饿了么项目-使用webpack打包项目
1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的& ...
- VUE:项目的创建、编写、打包及规范检查
VUE:项目的创建.编写及打包 项目的创建 使用 vue-cli 创建模板项目(官方提供的脚手架工具) https://github.com/vuejs/vue-cli npm install -g ...
随机推荐
- 严格根号带修 RMQ
其实很简单,把之前随机数据的解法中维护块内数据的数据结构换成约束 RMQ,这样子复杂度 严格 单点修改 \(O(\sqrt n)\),区间查询 \(O(1)\),线性空间. 唯一的问题是常数太大了,有 ...
- Nuxt框架中内置组件详解及使用指南(一)
title: Nuxt框架中内置组件详解及使用指南(一) date: 2024/7/6 updated: 2024/7/6 author: cmdragon excerpt: 本文详细介绍了Nuxt框 ...
- flutter 一直卡在Running Gradle task 'assembleDebug'...运行不起来
大概率只有一个原因:gradle下载不完整! 要想办法让他下载完整! 解决方法: 方法一:修改远程maven仓库地址(2024.7.9下列地址可用) repositories{ maven{ url' ...
- 探究kubernetes 探针参数periodSeconds和timeoutSeconds
探究kubernetes 探针参数 periodSeconds和timeoutSeconds 问题起源 kubernetes probes的配置中有两个容易混淆的参数,periodSeconds和ti ...
- 【nvm、node、npm、nrm】安装配置教程(windows版)
一.nvm 的安装与配置 1.nvm 下载与安装 nvm官方下载地址 (我这里使用当前最新版本 1.1.12) 2.验证 nvm 是否安装成功 # 查看 nvm 版本 nvm -v # 显示远程可安装 ...
- PowerShell pnpm 报错
Vue3> pnpm run dev pnpm : 无法加载文件 D:\program files\nodejs\node_global\pnpm.ps1.未对文件 D:\program fil ...
- SMU Summer 2024 第一周周报 (zhaosang)
学到了很多,不仅仅是学习方面的,在学校学跟在家寒假对比,天差地别吧. 补题的过程中收获满满,最近练习二分三分,栈队列单调栈等习题,题目不简单,努力学习中.. 打比赛也是,也有打的很惨的时候,我自己需要 ...
- git常用代码
//当前文件夹删除的文件恢复git reset Head .// 查看所有分支git branch// 查看本地分支 对应的远程分支git branch -vv//git branch -vv//创建 ...
- MySQL 跨服务器关联查询
如果您需要在 MySQL 中关联查询位于不同服务器的表(跨服务器关联查询),您可以考虑使用 MySQL 的联机查询(Federated MySQL).联机查询允许您在一个服务器上访问和查询另一个服务器 ...
- 【Java】CompletableFuture 异步任务编排
参考视频资料: https://www.bilibili.com/video/BV1nA411g7d2 https://www.bilibili.com/video/BV1S54y1u79K 一.启动 ...