Nuxt 3 默认启用服务端渲染（SSR），而 Web Worker 仅在浏览器环境可用，直接在 中导入并实例化会导致服务端执行时报 Worker is not defined 错误；需确保 Worker 初始化逻辑延迟至客户端挂载后执行。
nuxt 3 默认启用服务端渲染（ssr），而 web worker 仅在浏览器环境可用，直接在 `<script setup>` 中导入并实例化会导致服务端执行时报 `worker is not defined` 错误；需确保 worker 初始化逻辑延迟至客户端挂载后执行。</script>
在 Nuxt 3 中使用 Web Worker 提升计算性能（如大量字符串处理）是常见需求，但必须注意其仅运行于浏览器上下文——服务端（Node.js）不支持 Worker 全局对象。若你在 setup 顶层直接导入并实例化 worker（如 import MyWorker from "~/assets/workers/test?worker"），Nuxt 会在 SSR 阶段尝试执行该代码，从而触发 500 Internal Server Error 和 ReferenceError: Worker is not defined。
✅ 正确做法：将 Worker 的加载与初始化完全移至客户端生命周期钩子中，推荐使用 onMounted：
<script setup lang="ts">
import { onMounted } from 'vue'
onMounted(async () => {
// 动态导入 worker（仅在客户端执行）
const MyWorker = await import('~/assets/workers/test?worker')
const worker = new MyWorker.default() // 注意：Vite/Nuxt 3 worker 插件导出为 default
// 示例：发送消息并监听响应
worker.postMessage({ data: 'process-this-string' })
worker.onmessage = (event) => {
console.log('Worker result:', event.data)
}
// ⚠️ 记得在组件卸载时终止 worker（可选，避免内存泄漏）
onBeforeUnmount(() => {
worker.terminate()
})
})
</script>
? 补充说明与最佳实践：
-
不要在顶层
setup中使用new Worker(...)或静态import ...?worker：即使路径正确，SSR 仍会尝试解析该模块，导致崩溃； -
?worker是 Vite（及 Nuxt 3）内置的 worker 构建指令，它会将.ts文件打包为独立 worker 脚本，并生成一个构造函数类（注意：返回的是默认导出，即MyWorker.default）； - 若你的 worker 需要依赖第三方包（如注释中
my-package-in-node_modules），请确认该包兼容浏览器环境（无 Node.js 内置模块如fs、path等），否则构建或运行时仍会报错； - 如需复用 worker 实例，建议封装为 composable（例如
useStringProcessorWorker()），内部同样使用onMounted+ref管理实例状态； - 开发时可通过
console.log(typeof Worker)快速验证当前是否处于浏览器环境（服务端为'undefined'，客户端为'function'）。
通过将 Worker 初始化严格约束在 onMounted 及后续客户端生命周期中，你既能安全利用多线程能力提升前端计算性能，又完全兼容 Nuxt 3 的 SSR/SSG 构建模式。
