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打包项目版本号自加内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue增加强缓存和版本号的实现方法

    强缓存: 到底什么是强缓存?强在哪?其实强是强制的意思.当浏览器去请求某个文件的时候,服务端就在respone header里面对改文件做了缓存配置.缓存的时间.缓存类型都由服务端控制. 强缓存实现: cache-control: max-age=315360000, public ,immutable 客户端和代理服务器都可以缓存该资源,在315360000秒(10年)的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,即使用户做了刷新操作,也不向服务器发起h

  • vue.js编译时给生成的文件增加版本号

    vue.js在生成相关js和css文件的时候,名称是通过HASH的方式进行生成的,但是每次生成的文件基本都是一样的,那么浏览器就会缓存这些文件,为了在更新的时候能够保证js和css文件能够更新,那么我们需要针对webpack的配置文件进行修改: 打开webpack.prod.conf.js文件进行如下操作 1.增加版本变量(版本号暂时用时间代替) var Version = new Date().getTime(); 2.修改要生成的js和css文件的配置项,把刚刚声明的版本拼接进要生成的文件名

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

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

    目录 原因 方案 步骤 原因 项目每次打包后都需要改动项目版本号,这个改动每次都需要在package.json中修改version,比较麻烦,到底有没有一种打包后版本号自加的办法. 方案 版本号自加其实可以使用fs修改文件来实现的.具体思路是:在执行打包命令npm run build时,同时执行一段js代码,该代码通过调用fs来自加修改package.json中的version,然后再进行打包操作. 步骤 1.在package.json中将scripts中的打包命令修改为如下: 2.在src下创

  • 解决vue打包项目后刷新404的问题

    vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu

  • 前端vue打包项目,如何解决跨域问题

    前端vue打包项目,如何解决跨域问题

    目录 vue打包项目解决跨域 vue项目解决跨域(打包上线无需手动切换url) vue打包项目解决跨域 前段时间做一个vue打包成安卓和IOS的App,遇到了跨域问题,直接拿了之前项目的配置,却不起作用. import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.spri

  • Vue.js项目部署到服务器的详细步骤

    Vue.js项目部署到服务器的详细步骤

    前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文

  • Vue.js项目在apache服务器部署问题解决

    Vue.js项目在apache服务器部署问题解决

    目录 Vue.js项目在apache服务器部署后刷新404 造成原因 解决方案 首先需配置Apache基本设置,如监听端口,放置打包项目的路径等,参考:https://www.jb51.net/article/252857.htm Vue.js项目在apache服务器部署后刷新404 造成原因 vue 路由的URL有两种模式,一种是 hash,一种是history ,history 模式更好看一些,并且这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加

  • Android gradle配置抽取合并的操作步骤

    一.为什么要合并 当项目中model或library变多过后,比如用到组件化或者引入第三方库需要配置多个build gradle文件,一旦需要统一其SDK或者其他组件版本就需要同时修改多个文件,这确实很麻烦,所以抽取gradle配置非常有必要.抽取过后如果想修改版本, 只需修改公共文件的就可以了. 二.怎么操作文件 1. 新建gradle文件夹 1. 作用: 存放抽取的公用gradle文件 2. 操作步骤 在项目主目录新建gradle文件夹(Directory) 在gradle文件夹下新建and

  • Vue项目优化打包之前端必备加分项

    Vue项目优化打包之前端必备加分项

    目录 前言 一.路由懒加载 1. 为什么需要路由懒加载 2. 如何实现路由懒加载 3. 路由懒加载中的魔法注释 二.分析包大小 1. 需求 2. 如何生成打包分析文件 三.webpack配置排除打包 1. 需求 2. 排除打包 四. 引用网络资源 1. 需求 2. CDN 3. 实现步骤 五. 打包去除console.log 1. 需求 2. 代码演示 总结 前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优

  • vue项目接口域名动态获取操作

    需求: 接口域名是从外部 .json 文件里获取的. 思路: 在开始加载项目前 进行接口域名获取,然后重置 接口域名的配置项. 实现: 1.config/index.js 文件 进行基础配置 import axios from 'axios' const config = { requestUrl: 'http://qiniu.eightyin.cn/path.json', //动态域名所在地址 baseUrl: { dev: '/api/', pro: 'http://xxx.com/' //

  • vue 项目 iOS WKWebView 加载

    1.首先让前端的同事打一个包(index.html,static文件包含css.资源文件.js等)导入项目: :warning: 注意: 把index.html放入项目根目录下,command+n创建一个资源文件.bundle,资源文件里也的包含一份 index.html 下面开始代码: 懒加载WKWebView 引入#import <WebKit/WebKit.h> #import <WebKit/WKWebView.h> 继承 WKNavigationDelegate,WKUI

  • vue项目首屏加载时间优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目 vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx .用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析

随机推荐