vue-cli 构建页面输出版本号

vue-cli 构建页面输出版本号

1. 背景

在前端项目中，由于浏览器缓存特性或是快速判断服务器 CI / CD 是否成功时，开发者需要知道当前加载的页面是否是最新构建的版本。在使用 vue-cli 构建项目时，虽然默认设置了打包 js 文件名使用 hash 防止缓存，但并不能通过 hash 判断构建版本是否是最新版。若能够在页面入口中，通过执行 console.log(version) 在控制台输出版本号，便可以轻松解决上述问题。

2. 实现

可以在配置文件 vue.config.js 中定义 node 环境变量 version，值为当前的时间或时间戳，这样在每次执行 build 时，便可以将当时的构建开始时间作为环境变量记录下来。

const version = new Date()
module.exports = {
  chainWebpack(config){
    config.plugin('define').tap(args => {
      args[0]['process.env'].version = JSON.stringify(version)
      return args
    })
  }
}

在入口文件中输出当前版本号到控制台：

console.log('当前版本号：', process.env.version)

此外，还可以通过 fs.writeFile 将构建时间记录到本地文件中，作为构建流水。