vue打包时自动更新版本

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,执行打包命令npm run build

image.png

4,在页面里引用版本号

  const version=require('./../../package.json')

data赋值

version:version.version,

引用

<small style="color: #999999">{{version}}</small>

build.js源码

'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'production'

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const fs = require('fs');
const spinner = ora('building for production...')
spinner.start()
//每次打包构建代码，自动更新版本号，同一天加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()));
  }
// 结束
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
    if (err) throw err
    webpack(webpackConfig, (err, stats) => {
        spinner.stop()
        if (err) throw err
        process.stdout.write(stats.toString({
            colors: true,
            modules: false,
            children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
            chunks: false,
            chunkModules: false
        }) + '\n\n')

        if (stats.hasErrors()) {
            // console.log(chalk.red('  Build failed with errors.\n'))
            process.exit(1)
        }

        // console.log(chalk.cyan('  Build complete.\n'))
        // console.log(chalk.yellow(
        // '  Tip: built files are meant to be served over an HTTP server.\n' +
        // '  Opening index.html over file:// won\'t work.\n'
        // })
    })
})