如何利用CI工具将tag（版本号）展示在前端页面

 

一、背景

在日常的版本迭代中，很多小伙伴使用CI构建发布前后端的代码，而构建多是基于一个已测试的稳定的tag版本，比如v2.0.8。比如用Jenkins构建时，可以从Git仓库抓取指定的tag版本打包发布。

有这样一个小小的需求，需要将tag版本号展示在前端的页面上，或将版本号加入build生成的js及css文件名中，防止客户缓存造成的问题。

达到这种目的的方法有很多，这里我们给出一种简单的实践。前提是假设你使用了CI工具如Jenkins，并且构建是基于tag构建

二、工具依赖

Jenkin +  Git Parameter Plug-In 插件

三、实现步骤

1. 在前端根目录下创建文件revision.json，内容为

{"revision": "v2.0"}

 

2. 在需求展示的页面引入json并进行展示，这里以Vue代码为例

<template>
  <div class="foot">
    Copyright © 2020 版权所有 {{revision}}
  </div>
</teamplate>
<script>
import conf from '../../revision.json'
export default {
  name: "footer",
  data() {
    return {
      revision: conf.revision
    }
  }
};
</script>

 

3. 到现在打包发布时，在foot中已经可以展示版本号，默认为v2.0，现在需要做的就是将每次打包发布的tag号替换v2.0，下面需要将Jenkins的tag替换json中的默认值，

在Jenkins中我们添加一个Git Parameter，名为build_with_tag，如下：

4.  我们增加构建步骤，在将源码拉取下来后，修改revision的内容，构建的Shell命令为：

> revision.json
echo "{\"revision\": \"${build_with_tag}\"}" > revision.json

 

即新清空revision.json的内容，再重新写入包含tag参数的内容

5. 当我们进行构建时，Jenkins会将git创建中的tag列出供我们选择

 

至此，我们成功将tag版本号展示在页面上~