无法捕获错误：vue3 Web 应用程序中的“Uncaught ReferenceError：NDEFReader 未定义”

Question

我正在开发一个 vue3 应用程序，我想在其中使用 NFC Web Api 来读取和写入 NFC 芯片。 我正在使用 typescript、vue 路由和 pinia。 当应用程序的设备具有处于活动状态的 NFC 芯片时，它工作正常，但当 NDEFReader 因任何原因不可用时，我想显示我自己的错误页面。

确切的错误是这样的：

NDEF.ts:45 Uncaught ReferenceError: NDEFReader is not defined
    at NDEF.ts:45:18
(anonymous) @ NDEF.ts:45

NDEF.ts 是我的类型定义文件，第 45 行有

export default NDEFReader

将文件导入到我的商店后，NDEFReader 的类型定义文件中就会出现错误，如下所示：

import NDEFReader from "@/models/NDEF";

商店被导入并在我的 vue 组件中调用，如下所示：

const nfcStore = useNFCStore();

我尝试进行动态导入，但我无法使用此导入。 我尝试使用 ErrorCaptured 生命周期挂钩，该挂钩适用于商店中的其他错误，但不适用于此错误。 我已经在 main.ts 中尝试了 vue 的全局错误处理，如下所示：

app.config.errorHandler = function (err, vm, info) {
    console.error("Fehler gefunden")
}

我尝试围绕“const nfcStore = useNFCStore();”与trycatch。 我尝试在检查 nfc 之前不加载组件，但即使在 App.vue 中使用 v-if 包围路由器视图时也是如此：

<div v-if="nfc">
  <router-view/>
</div>

并且“nfc”为 false，则会引发错误。

似乎没有什么可以解决这个错误。

如何获取此错误以重新路由到错误页面，以便当 NDEF 不存在时该页面不是空白？

Answer 1

NFC 的支持 不幸的是不是那么好。

另外，请小心，因为 API 仅可通过 HTTPS 访问，这可能就是您有时会遇到错误的原因。

如果你真的想这样做，你可以随时尝试这个来解决你的问题或使用

try/catch

或类似方法在互联网上找到的任何其他代码片段。动态 import/errorHandler/etc 并不是此类原生浏览器 API 的最佳选择。

---

同时，对于较差的支持，我可能建议使用一些QR码扫描。可能会产生类似的结果，并且总体上有更好的支持。