我正在做一个Vue.js项目，在App.vue文件中写了这段代码，用来对应用中的所有异常以及Promise的拒绝进行处理。

  window.addEventListener('error', event => {
    errorDialog.value = true
    errorMessage.value = event.error.message
  })

  window.addEventListener('unhandledrejection', event => {
    errorDialog.value = true
    errorMessage.value = event.reason.message
  })

在开发模式下，一切都运行得很顺畅……但打包后就有点儿怪。

经过多次测试，我发现：只有当异常直接由事件监听器抛出时才会不起作用。

为便于理解，下面给出一个用例

<template>
    <button @click="onClick_1()">CLIK ME</button>
    <button @click="onClick_2()">CLIK ME</button>
    <button @click="onClick_3()">CLIK ME</button>
    <button @click="onClick_4()">CLIK ME</button>
</template>

<script setup>
  function onClick_1 () {
    throw '1' // Doesn't trigger anything
  }

  async function onClick_2 () {
    /** With or without 'await' here **/
    throw '2' // Doesn't trigger anything
  }

 function onClick_3 () {
    (async () => {
      throw '3' // Triggers the unhandledrejection listener
    })()
  }

 async function onClick_4 () {
    (async () => {
      throw '4' // Triggers the unhandledrejection listener
    })()
  }
<script>

请问这里到底是怎么回事，应该如何修复？

在此先行致谢！

解决方案

一个解决办法是将

  window.addEventListener('error', event => {
    errorDialog.value = true
    errorMessage.value = event.error.message
  })

  window.addEventListener('unhandledrejection', event => {
    errorDialog.value = true
    errorMessage.value = event.reason.message
  })

替换为

  vue.onErrorCaptured(error => {
    errorDialog.value = true
    errorMessage.value = error.message
  })

但我还没有对所有边缘情况进行测试。

我仍想了解为什么我在第一条消息中给出的代码在构建后不起作用。