根本原因是浏览器以html页面url为基准解析worker路径，而非js文件位置；应使用new url('./x.js', import.meta.url)确保正确，或采用内联模式避免路径问题。
Web Worker 脚本路径在打包后出错，根本原因不是代码写错了，而是浏览器解析路径的方式和你预想的不一致：它永远以 HTML 页面 URL 为基准拼接路径，而不是按 JS 文件位置或模块导入关系。
路径解析规则必须认清
无论你在 src/workers/calc.js 还是 utils/worker.ts 里写 new Worker('./helper.js')，浏览器都会：
- 取当前页面完整地址（比如
https://app.com/dashboard/index.html） - 把
'./helper.js'拼到该地址路径部分，得到https://app.com/dashboard/helper.js - 完全忽略文件物理位置、import 结构、甚至 webpack 的 resolve.alias 配置
推荐方案：用 new URL(..., import.meta.url)
这是现代构建工具（Vite、Webpack 5+、Vue CLI 5+）原生支持的安全写法，能自动适配开发与生产环境：
new Worker(new URL('./my.worker.js', import.meta.url))- Vite 中还可加
{ type: 'module' }支持 ES Module Worker - Webpack 需确保
experiments.topLevelAwait: true或使用worker-loader+ 正确 publicPath
Webpack 场景下关键配置项
若用 worker-loader，它的 publicPath 决定最终请求地址前缀，不是文件路径：
- 设为
publicPath: '/assets/workers/'→ 所有 Worker 请求都走/assets/workers/xxx.js - 动态写法更稳妥：
publicPath: () => process.env.NODE_ENV === 'production' ? 'https://cdn.example.com/workers/' : '/dev-workers/' - 不配 publicPath？它会退回到 webpack 的
output.publicPath，而这个值常为'./'，极易导致 404
简单逻辑优先考虑内联模式
如果 Worker 只做轻量计算（如 JSON 校验、字符串处理），且不依赖外部 npm 包，直接内联最省心：
-
inline: 'no-fallback'：转成 Blob URL，零网络请求，彻底绕过路径问题 -
inline: 'fallback'：同时生成独立文件 + 内联代码，老浏览器自动降级 - 配置示例：
{ test: /\.worker\.js$/, use: { loader: 'worker-loader', options: { inline: 'no-fallback' } } }
不复杂但容易忽略：路径不是“找文件”，而是“算 URL”。盯住页面地址，再决定怎么写路径或配 publicPath。
