vue项目如何在页面中增加commit hash版本号

痛点

每次发布项目之后，发现改的bug并没有生效，原因可能是代码部署失败，也可能是浏览器的缓存，需要一个标记能知道当前代码是否是最新版的代码

解决方案

所以我们打算在html的head里，增加一个commit hash来表示当前的版本号

步骤

项目是基于webpack的，我们引入webpack的一个插件Git revision webpack plugin

官方地址

git-revision-webpack-plugin：可在构建过程中生成VERSION和COMMITHASH文件的Webpack插件。

安装本地开发依赖项

Webpack 4及以上版本：

1
cnpm install --save-dev git-revision-webpack-plugin

Webpack 4以下版本：

1
cnpm install --save-dev git-revision-webpack-plugin@2.5.1

在文件build/webpack.prod.conf.js中增加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
const GitRevisionPlugin = require('git-revision-webpack-plugin')
const gitRevisionPlugin = new GitRevisionPlugin()

const devWebpackConfig = merge(baseWebpackConfig, {
	...// 省略代码
	plugins: [
		gitRevisionPlugin,
        new webpack.DefinePlugin({
          'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash())
        }),
	]
})

如果觉得commit hash太长，可以增加配置参数

1
2
3
const gitRevisionPlugin = new GitRevisionPlugin({
  commithashCommand: 'rev-parse --short HEAD'
})

更多配置项，可以参考官网

最后，打开index.html，在head头部增加meta标签，name为app-version

1
2
3
4
5
<html>
  <head>
    <meta name="app-version" content="<%= COMMITHASH%>">
  </head>
</html>
#vue
vue项目如何在页面中增加commit hash版本号
https://thaneyang.github.io/2021/02/vue项目如何在页面中增加commit-hash版本号.html
作者
ThaneYang
发布于
2021年2月12日
许可协议