背景

有时候我们构建应用完成后，希望在footbar上显示最新的版本号信息（小版本号根据构建时间自动生成），这样我们看版本号信息就知道是什么时候构建的。

解决方法

修改vite.config.js，返回增加 define 字段，其他字段不需要修改：

image.png
代码如下：

define: {
      __APP_VERSION__: JSON.stringify('v1.0.0' + (command === 'build' ? '.' + dateString : '.D'))
}

注意点：

这里区分了是否构建时，如果不是构建时，就写死为 '.D'
这里的dateString通过当前时间生成

function generateDateString() {
  let time = new Date()
  let Y = time.getFullYear();
  let M = time.getMonth() + 1;
  let D = time.getDate();
  let h = time.getHours();
  let m = time.getMinutes();
  let s = time.getSeconds();
  return Y + '' + (M < 10 ? '0' + M : M) + '' + (D < 10 ? '0' + D : D) + '' + (h < 10 ? '0' + h : h) + '' + (m < 10 ? '0' + m : m) + '' + (s < 10 ? '0' + s : s);
}
const dateString = generateDateString()

页面里引用

接下来我们需要在页面里引用 __APP_VERSION__ 这个值：

image.png

js代码如下：

<script setup>
const version = __APP_VERSION__
const year = new Date().getFullYear();
</script>

然后在 template 代码里引用 version 这个变量就行：

<template>
  <div class="login">
    <div class="el-login-footer">
      <span>Copyright © 2022-{{ year }} xx有限公司版权所有. {{ version }}</span>
    </div>
  </div>
</template>