在 Vue CLI 3 下构建带有 git 提交编号的页面

2019-02-09 14:09 #旧文章

提示

这篇文章针对的是 Vue CLI 3，不适用与 Vue CLI 2

最近把这个网站重构了一下，想要做出那种在页面下方可以显示这个页面对应的是代码仓库里哪一个版本的效果。上网查了查发现相关的资料挺少的，现在记个笔记。

获取版本号

首先需要在工程目录下面新建一个 vue.config.js，然后在里面写上

process.env.VUE_APP_FULL_VERSION = require("child_process")
  .execSync("git rev-parse HEAD")
  .toString();
process.env.VUE_APP_VERSION = process.env.VUE_APP_FULL_VERSION.substr(0, 8);

第一行获取的是完整的版本号，也就是同步地执行 git rev-parse HEAD 命令并读取输出，长度是 40 字符，一般显示出来只需要开头的 8 个字符，也就是第二行截取的以小段。同理，在这个文件里面你还可以做其他动态设置的环境变量，比如构建的时间。
注意：环境变量必需以 VUE_APP_ 开头，否则不会被 Vue CLI 3 引入工程。

使用

在你想使用这个变量的地方写下 process.env.VUE_APP_VERSION 即可，需要小心的是这个表达式不能直接写在 HTML 里面，因为 Vue 中，在 HTML 中使用类似 {{version}} 表达式取值时取到的值是 this.version 而不是 window.version。下面是我写的部分代码。

<template>
  <div>{{ version }}</div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      version: process.env.VUE_APP_VERSION,
    };
  },
};
</script>
<style lang="less"></style>

参考资料