松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › Vue CLI 3.0 构建时插入版本等信息

Vue CLI 3.0 构建时插入版本等信息

迦娜王
3年前Vue
1,319 0 4

有时候我们需要打包后自动把版本号,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>
4
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
router的使用
上一篇
卷积结构原理
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • 插入构建时间
  • 插入版本号
  • 插入Git Hash
  • Example完整代码
4
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 4
  • 0
  • Top