vue-cli3.0在打包时自动更新版本号，在部署上去之后方便查看版本号

原因

为了区分有时候部署上去的代码到底是不是最新版本。
或者请求css或者js文件都可以加上去，防止拿到旧的缓存文件。

我是前者，被领导要求加上去的。
百度了几分钟，发现好像没人这么写过，索性自己写一个吧。

废话不多说，直接上代码

build.js文件代码

1. 第一步：在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()));
}

2. 如果没有引入fs模块，记得引入

const fs = require('fs');

3. 接下来在控制台执行一遍build打包看看结果

npm run build

4. 执行成功！
   
   可以看到package.json文件里的version值也变化了。
5. 接下来在封装好axios请求库中引入package.json文件，要做的就是在请求时加上版本号这个参数，也可以在index.html的mate标签中加版本号，看个人喜好。
   
6. 我把版本号作为参数，加上去之后看看在浏览器控制台的效果。
   
   大功告成！
   ps：如果package.json里面的json没有格式化，是会报错的哟，但不影响继续打包，只是不会更新版本号而已