vite全自动记录打包时间等自定义信息到根目录json，可用于后台展示

在 vite.config.ts 中，找到 defineConfig 后
在上方插入以下代码

function buildTimePlugin() {
  let startTime = 0
  let endTime = 0
  return {
    name: 'build-time',
    apply: 'build',
    buildStart() {
      startTime = Date.now()
    },
    buildEnd() {
      endTime = Date.now()
      let t = new Date()
      // const usedTime = 22.26 --打包完成耗时
      const usedTime = (endTime - startTime) / 1000
      // const buildTime = 2023/10/30 16:16:16 --打包完成时间
      const buildTime = t.toLocaleString()
      // const version = 231030161616 --版本号
      const version = t.toLocaleString().replace(/[/ :]/g, '').replace(/^.{2}/, "");
      setTimeout(()=>{fs.writeFileSync(path.resolve(__dirname, 'dist','build-info.json'), JSON.stringify({ usedTime,buildTime,version }))},1000)
    }
  }
}

(代码块最下面的setTimeout是因为立刻生成的话会被新生成的dist目录吃掉，时间紧没找到更好的办法)

---

在plugins下级插入以下代码

buildTimePlugin(),

代码如下图(不一定完全一致)

打包出来的文件格式参照

json内容参照

{
    "usedTime": 21.21,
    "buildTime": "2023/10/30 11:33:05",
    "version": "231030113305"
}

引用示例

<p class="demo-rich-content__desc" style="margin: 0">
    版本号: {{ versionNumber }}
</p>
<p class="demo-rich-content__desc" style="margin: 0">
    打包耗时: {{ usedTime }}
</p>
<p class="demo-rich-content__desc" style="margin: 0">
    打包时间: {{ buildTime }}
</p>

onMounted(async () => {
  const res = await fetch('/build-info.json') // 获取文件
  const data = await res.json()
  let t = new Date()
  usedTime.value = data.usedTime ? data.usedTime + '秒' : '6.6秒'
  versionNumber.value = data.version ? 'v' + data.version : 'v' + t.toLocaleString().replace(/[/ :]/g, '')
  buildTime.value = data.buildTime ? data.buildTime : t.toLocaleString()
})

引用参照

---

• 分类： 前端
• 标签： 无标签