Nuxt3中使用Web Worker报错‘Worker is not defined’如何解决？

API 探路者

2026-7-4

修复Nuxt3中Web Worker的Worker is not defined错误

问题根源是Nuxt3的服务端渲染机制：页面在服务端生成时会执行<script setup>中的代码，但服务端环境不存在浏览器的Worker API，导致直接创建Worker实例报错。以下是两种可行的修复方案：

方案一：用`process.client`条件包裹客户端逻辑

通过Nuxt提供的process.client环境变量，仅在客户端环境下加载并创建Worker：

<script setup lang="ts">
let worker: Worker | null = null;

// 仅在客户端执行Worker相关代码
if (process.client) {
  // 动态导入Worker文件，避免服务端解析时出错
  import("~/assets/workers/test?worker").then(({ default: MyWorker }) => {
    worker = new MyWorker();
    
    // 监听Worker消息
    worker.onmessage = (event) => {
      console.log("Worker返回结果:", event.data);
    };

    // 向Worker发送需要处理的数据
    worker.postMessage("待计算的字符串内容");
  });
}

// 页面卸载时终止Worker，避免内存泄漏
onUnmounted(() => {
  worker?.terminate();
});
</script>

方案二：使用`onMounted`钩子确保客户端执行

onMounted钩子仅在客户端触发，可将Worker初始化逻辑放在这里：

<script setup lang="ts">
let worker: Worker | null = null;

onMounted(async () => {
  const { default: MyWorker } = await import("~/assets/workers/test?worker");
  worker = new MyWorker();
  
  // 监听Worker返回的结果
  worker.onmessage = (event) => {
    console.log("Worker处理完成:", event.data);
  };
});

onUnmounted(() => {
  worker?.terminate();
});
</script>