如何为Vue项目添加版本号

在使用webpack编译项目发布到生产的时候如何确定当前生产版本是否更新到最新版了呢？
现在我将分享两种自动化的方案供需要的开发者参考

1. 在生成的js文件名中添加时间戳或者git分支的hash
2. 使用工具生成版本文件发布至生产环境

先介绍第一种方式

在文件名或路径上添加参数

// 在构建生产的配置中使用此方法
var wepack = require('webpack');
var fs = require('fs');
// 利用nodejs的io能力获取git当前的hash值，也可以使用exec执行命令行进行回去最新git commit hash
var gitHEAD = fs.readFileSync(".git/HEAD", "utf-8").trim(); // ref: refs/heads/release
var ref = gitHEAD.split(": ")[1]; // refs/heads/release
var gitVersion = fs.readFileSync(".git/" + ref, "utf-8").trim(); // git版本号
var Version = gitVersion.slice(0, 8); // 例如dev环境: 6ceb0a"

webpack3

/**
  * webpack.prod.conf.js
  */
webpack({
	// 找到打包后文件输出位置的配置
    output：{
        path: config.build.assetsRoot,
        filename: '/js/[name].js?v='+Version, //'/js/[name]-'+Version+'.js'
        chunkFilename: '/js/[id].js?v=' + Version
    }
})

vue-cli

module.exports = {
    	configureWebpack: config => {
        	config.output.filename =  '/js/[name].js?v='+Version, //'/js/[name]-'+Version+'.js'
        	config.output.chunkFilename ='/js/[id].js?v=' + Version
 		}
 	}

使用工具生成对应的版本文件

在package.json中配置项目名称name:exa_name

npm i build-record-webpack-plugin --save-dev

module.exports = {
	 configureWebpack: config => {
	 	 new BuildRecordWebpackPlugin({
                assets: true, // 开启生成版本文件在构建完成的根目录
                BuildInfo(info) {
                    console.log(info);  // 构建过程中的信息，会在静态文件名称后拼接git shorthash
                    const commitHash = info.SpecificationVersion.substr(0, 7)
                    config.output.filename = `${assetsDir}/js/[name].${commitHash}.js`
                    config.output.chunkFilename = `${assetsDir}/js/[name].${commitHash}.js`
                }
            })
	 }
}

该工具会在回调函数中输出响应的打包构建的信息，同时可选择在dist或构建完成后的目标文件夹中生成一个exa_name_version.json的文件

{ 
      SpecificationVersion: '5b508b41', // git hash
      SpecificationTitle: 'exa_name',   // 工程名称
      Timeofbuild: '07071436',          // 打包日期
      argvofbuild: 'build',			    // 打包参数
      CreatedBy: 'Administrator'        // 打包环境user
}