前端打包写入分支信息 打包时间等信息

在客户端访问界面时 控制台打印版本信息

1686736852(1).png

在vue.config.js添加

// 获取当前git分支信息
function getBranchVersionInfo() {
  let vName = execSync('git name-rev --name-only HEAD').toString().trim();
  return vName
}


module.exports = {
chainWebpack: config => {
    config.resolve.alias.set('@', path.resolve(__dirname, 'src'));
    config.resolve.alias.set('@types', path.resolve(__dirname, 'src/@types'));
    

    // 主要是下面这一段
     // 使用webpack.DefinePlugin
    config.plugin('define').tap(args => {
      args[0]['process.env'].WEB_VERSION = (function () {
        const now = new Date()
        function format (num) {
          return num < 10 ? '0' + num : '' + num
        }
        const v = now.getFullYear() + format(now.getMonth() + 1) + format(now.getDate()) +'-'+ format(now.getHours()) + format(now.getMinutes())
        console.log('process.env.WEB_VERSION', v)
        return JSON.stringify(v)
      })()
      args[0]['process.env'].nowBranch = (function () {
        console.log('process.env.nowBranch', getBranchVersionInfo())
        return JSON.stringify(getBranchVersionInfo())
      })()
      return args
    })
    // end

  },

}

最后在main.js或者入口文件app.vue可以打印

const t = "color:#ccc;font-size:12px;background:#333;padding:2px 4px;border-radius:4px 0 0 4px;"
const e = "color:#fff;background:green;padding:2px 4px;border-radius:0 4px 4px 0;"
const i = "color: green;font-size: 18px;font-weight:bold;";
console.log("%c" + "=".repeat(18) + "版本信息" + "=".repeat(18), i),
console.log(`%c打包时间：%c${process.env.WEB_VERSION}`, t, e),
console.log(`%cbranch：%c${process.env.nowBranch}`, t, e),
console.log("%c" + "=".repeat(18) + "版本信息" + "=".repeat(18), i)