「Vite打包时注入时间字符串到Vue模板中」

·

有时,我们希望在访问生产环境网页时可以看到上一次构建的一些信息,如构建版本,构建时间等。下面介绍如何使用Vite达成这种效果。

  1. vite.config.js中使用define定义一个全局变量
vite.config.js
defineConfig({
    define:{
        __BUILD_TIME__: JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss'))        
    }
})
  1. 在Vue文件中使用
<script setup>
const BUILD_TIME = __BUILD_TIME__
</script>

<template>
  {{ BUILD_TIME }}
</template>