vite使用define定义项目打包信息

3,384 阅读1分钟

vite使用define定义项目打包信息

由于项目多人开发,想要在控制台查看当前运行包的具体信息包括(build时间、代码分支、打包人、最后一次提交记录等等),通过查阅vite文档发现define可以解决这个问题,具体如下
首先在vite.config.js中进行配置
// 在vite.config.js中定义一个项目信息
import { defineConfig } from 'vite'
const __APP_INFO__ = {
  buildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    // ...
};
​
export default defineConfig(({ command, mode }) => {
  return {
    // vite 配置中增加字段 
    define: {
       __APP_INFO__: JSON.stringify(__APP_INFO__),
    },
  }
})
​
随后在App.vue中定义window变量
<template>
  <router-view />
</template><script>
import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(() => {
      if (__APP_INFO__) {
        window.__APP_INFO__ = __APP_INFO__;
      }
    });
  },
};
</script><style>
</style>

结果如下:

image-20230718171734368.png