Vue CLI 3.0 构建时插入版本等信息
有时候我们需要打包后自动把版本号,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>
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。