有时候我们需要打包后自动把版本号，repo的hash，构建时间等信息嵌入到页面里面去，如果每次手动操作很是麻烦。我们可以通过环境变量和lodash template 语法把这些信息插入到index.html里面。

插入构建时间

在vue.config.js头部插入

process.env.VUE_APP_BUILD_TIME = parseTime(new Date())//parseTime是我定义的格式化函数

然后在入口index.html插入

<script>
   window.buildAt = '<%= VUE_APP_BUILD_TIME %>'
</script>

最后可以在你需要显示的地方读取就可以了。

插入版本号

插入版本号和插入时间一样。如果你希望从`package.json`读取版本号，那么可以这样

let pj = require("./package.json")
let ver = pj.version
process.env.VUE_APP_BUILD_VER = pj.version

最后别忘记了在入口`index.html`模板里面注入。

插入Git Hash

每次提交git都会生生一个hash来确保唯一性。有时候我们可以把hash嵌入到包里面，方便追溯源码。

// 当前脚本的工作目录的路径
 let cwd = '"' + process.cwd() + '"'; // process-node全局模块用来与当前进程互动，可以通过全局变量process访问，不必使用require命令加载。它是一个EventEmitter对象的实例。process.cwd()表示返回运行当前脚本的工作目录的路径
 // 获取git版本,这里还可以模式来区分
 let fs = require("fs")
 let gitHEAD = fs.readFileSync('.git/HEAD', 'utf-8').trim() // ref: refs/heads/develop
 let ref = gitHEAD.split(': ')[1] // refs/heads/develop
 let branch = gitHEAD.split('/')[2] // 环境：develop
 let gitVersion = fs.readFileSync('.git/' + ref, 'utf-8').trim() 
 let gitCommitVersion = branch + ': ' + gitVersion
 process.env.VUE_APP_BUILD_REPO_VER = gitCommitVersion

最后别忘记了在入口`index.html`模板里面注入。

Example完整代码

vue.config.js

let pj = require("./package.json")

function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (('' + time).length === 10) time = parseInt(time) * 1000
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return timeStr
}

process.env.VUE_APP_BUILD_TIME = parseTime(new Date())
process.env.VUE_APP_BUILD_VER = pj.version

// 当前脚本的工作目录的路径
let cwd = '"' + process.cwd() + '"'; // process-node全局模块用来与当前进程互动，可以通过全局变量process访问，不必使用require命令加载。它是一个EventEmitter对象的实例。process.cwd()表示返回运行当前脚本的工作目录的路径

// 获取git版本,这里还可以模式来区分
let fs = require("fs")
let gitHEAD = fs.readFileSync('.git/HEAD', 'utf-8').trim() // ref: refs/heads/develop
let ref = gitHEAD.split(': ')[1] // refs/heads/develop
let branch = gitHEAD.split('/')[2] // 环境：develop
let gitVersion = fs.readFileSync('.git/' + ref, 'utf-8').trim() // git版本号，例如：6ceb0ab5059d01fd444cf4e78467cc2dd1184a66
let gitCommitVersion = branch + ': ' + gitVersion  // 例如dev环境: "develop: 6ceb0ab5059d01fd444cf4e78467cc2dd1184a66"
process.env.VUE_APP_BUILD_REPO_VER = gitCommitVersion

console.log('------------------------------------------------------------')
console.log('|                        BUILD INFO                        |')
console.log('------------------------------------------------------------')
console.log('building branch :', branch)
console.log('building time   :', process.env.VUE_APP_BUILD_TIME)
console.log('building version:', process.env.VUE_APP_BUILD_VER)
console.log('repo hash       :', gitVersion)
console.log('------------------------------------------------------------\n')

index.html

<script>
   window.buildAt = '<%= VUE_APP_BUILD_TIME %>'
   window.buildVer= '<%= VUE_APP_BUILD_VER %>'
   window.buildRepoVer= '<%= VUE_APP_BUILD_REPO_VER %>'
</script>