vue-cli3.0在打包时自动更新版本号,在部署上去之后方便查看版本号
Vue-cli3.0在打包时自动更新版本号,写给有需要的人原因废话不多说,直接上代码原因为了区分有时候部署上去的代码到底是不是最新版本。废话不多说,直接上代码build.js文件代码第一步:在build文件夹下面的build.js文件中添加这段代码//每次打包构建代码,自动更新版本号,同一天加1,隔天自动回归变成 1 。例如{ 今天:1.20200917.3,第二天:1.20200918.1 }t
·
Vue-cli3.0修改build.js源码,在打包时自动更新版本号,写给有需要的人
原因
为了区分有时候部署上去的代码到底是不是最新版本。
或者请求css或者js文件都可以加上去,防止拿到旧的缓存文件。
我是前者,被领导要求加上去的。
百度了几分钟,发现好像没人这么写过,索性自己写一个吧。
废话不多说,直接上代码
build.js文件代码
- 第一步:在build文件夹下面的build.js文件中添加这段代码
//每次打包构建代码,自动更新版本号,同一天加1,隔天自动回归变成 1 。例如{ 今天:1.20200917.3,第二天:1.20200918.1 }
try {
function AddZero(time){
if(time<10){
return "0"+time
}else{
return time
}
}
let packageTxt=fs.readFileSync('./package.json','utf8');
let versionData = packageTxt.split('\n');
let packageJson = JSON.parse(packageTxt);
let VersionArr = packageJson.version.split('.');
let date = new Date();
let today = date.getFullYear()+""+AddZero((date.getMonth()+1))+""+AddZero(date.getDate())
if(today == VersionArr[1]){
VersionArr[2] = parseInt(VersionArr[2])+1
}else{
VersionArr[1] = date.getFullYear()+""+AddZero((date.getMonth()+1))+""+AddZero(date.getDate())
VersionArr[2] = 1;
}
let versionLine = VersionArr.join('.');
for(let i= 0; i<versionData.length;i++){
if(versionData[i].indexOf('"version":')!=-1){
versionData.splice(i,1,' "version": "'+versionLine+'",');
break;
}
}
fs.writeFileSync('./package.json',versionData.join('\n'),'utf8');
console.log(chalk.green.bold('更新版本号成功!当前最新版本号为:'+versionLine));
} catch(e) {
console.log(chalk.red.bold('读取文件修改版本号出错:',e.toString()));
}
- 如果没有引入fs模块,记得引入
const fs = require('fs');
- 接下来在控制台执行一遍build打包看看结果
npm run build
- 执行成功!
可以看到package.json文件里的version值也变化了。 - 接下来在封装好axios请求库中引入package.json文件,要做的就是在请求时加上版本号这个参数,也可以在index.html的mate标签中加版本号,看个人喜好。
- 我把版本号作为参数,加上去之后看看在浏览器控制台的效果。
大功告成!
ps:如果package.json里面的json没有格式化,是会报错的哟,但不影响继续打包,只是不会更新版本号而已
更多推荐
已为社区贡献1条内容
所有评论(0)