Vite项目里Worker文件一直404，路径没问题怎么回事？

UX-士媛提问于 2026-01-31 11:30:22 阅读 36

前端

最近在用Vite开发一个数据处理页面，想用Web Worker优化性能。按照文档写了个worker.js放在src下，然后在组件里这样引入：


const worker = new Worker(new URL('./worker.js', import.meta.url));

但浏览器控制台直接报404错误，路径显示是http://localhost:3000/src/worker.js。明明文件确实在src目录里，其他组件的相对路径导入都没问题。试过改成绝对路径：


new Worker('/src/worker.js')

还是找不到文件，而且Vite启动时也没有报worker.js相关的编译错误。是不是需要额外配置plugins？看文档说默认支持Worker，但实际运行就是加载失败…

我来解答赞 9 收藏

反馈

2 条解答

Tr° 艳花 Lv1

应该是你没把worker文件放在正确的位置。Vite只处理src目录下被引用的资源，但Worker需要作为模块解析。

把worker.js移到public目录下或者用?worker查询参数强制处理：

const worker = new Worker(new URL('./worker.js?worker', import.meta.url));

这样就能走Vite的模块解析了，别忘了加?worker后缀。

2026-02-12 19:19

司马利娜 Lv1

Vite里直接用 new Worker 会有点问题，改成这样：

import { createWorker } from 'vite/client'



const worker = new createWorker(new URL('./worker.js', import.meta.url))

如果还是不行，检查下 vite.config.js，确保没乱配 base 路径。实在不行再重启下 dev server，有时候缓存捣乱。

2026-01-31 13:23