Vue3+TypeScript项目中捕获NDEFReader未定义错误求助

问题根源 #

你遇到的错误发生在模块解析阶段：静态导入NDEF.ts时，模块顶层代码直接引用了未定义的NDEFReader，这个错误早于Vue应用初始化完成，所以Vue的errorCaptured、全局错误处理，甚至组件内的try-catch都无法捕获——因为这些机制只能处理运行时错误，管不到模块加载阶段的语法/引用错误。

解决方案 #

1. 重构NDEF类型文件，避免顶层直接引用NDEFReader #

修改@/models/NDEF.ts，将直接导出改为条件判断的工具函数，确保只有在环境支持时才访问NDEFReader：

// @/models/NDEF.ts
// 先做类型声明（TypeScript需要）
declare global {
  interface Window {
    NDEFReader?: typeof NDEFReader;
  }
}

// 导出检查函数与类型
export const isNFCSupported = () => 'NDEFReader' in window;
export const getNDEFReader = () => {
  return window.NDEFReader ?? null;
};
export type NDEFReaderInstance = InstanceType<typeof NDEFReader> | null;

2. 修改Pinia Store，延迟初始化NFC逻辑 #

不要在Store的顶层静态导入NDEFReader，而是通过工具函数动态检查支持性：

// stores/nfc.ts
import { defineStore } from 'pinia';
import { isNFCSupported, getNDEFReader } from '@/models/NDEF';

export const useNFCStore = defineStore('nfc', {
  state: () => ({
    reader: null as NDEFReaderInstance,
  }),
  actions: {
    async initNFC() {
      if (!isNFCSupported()) {
        throw new Error('设备不支持NFC功能');
      }
      const Reader = getNDEFReader();
      if (Reader) {
        this.reader = new Reader();
        // 这里可以添加初始化逻辑，比如监听NFC标签
        await this.reader.scan();
      }
    },
  },
});

3. 在路由/应用入口提前检查，拦截跳转 #

在全局路由守卫中提前判断NFC支持性，直接跳转到错误页，避免进入需要NFC的页面：

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import NFCError from '@/views/NFCError.vue';
import { isNFCSupported } from '@/models/NDEF';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home, meta: { requiresNFC: true } },
    { path: '/nfc-error', component: NFCError },
  ],
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requiresNFC && !isNFCSupported()) {
    next('/nfc-error');
  } else {
    next();
  }
});

export default router;

4. 组件内兜底捕获运行时错误 #

如果需要在组件内初始化NFC，用try-catch包裹初始化逻辑，确保错误能被捕获并跳转：

<!-- Home.vue -->
<template>
  <div class="nfc-content">...</div>
</template>

<script setup lang="ts">
import { useNFCStore } from '@/stores/nfc';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';

const nfcStore = useNFCStore();
const router = useRouter();

onMounted(async () => {
  try {
    await nfcStore.initNFC();
    // 执行NFC相关操作
  } catch (err) {
    router.push('/nfc-error');
  }
});
</script>

内容的提问来源于stack exchange，提问作者Philipp-1A