Vue3项目引入WebWorker文件报Unexpected token '<'错误如何解决？

API 探路者

2026-9-30

问题根因

你遇到的Unexpected token '<'错误是因为你传入new Worker()的相对路径在运行时无法被构建工具正确解析，未找到资源的请求被SPA服务重定向到了入口HTML文件，导致worker加载到了非JS内容触发语法错误。

对应解决方案

分两种常见Vue3构建环境处理：

1. Vite 构建环境

Vite内置了Web Worker支持，无需额外插件，使用专用导入语法即可：
调整page.vue代码如下：

import * as Comlink from "comlink";
// 导入时添加?worker后缀标识这是worker文件
import TestWorker from '../../workers/worker.js?worker'

export default {
  methods: {
    async tryOnClick() { // 注意Comlink调用是异步的，需要加async
      const worker = new TestWorker();
      // 必须接住wrap返回的代理对象，不能直接用原始worker实例调用方法
      const workerApi = Comlink.wrap(worker);
      const res = await workerApi.trial();
      console.log(res); // 输出hello
    },
  },
};

2. Vue CLI / Webpack 构建环境

需要先安装worker-loader插件，再配置导入规则：

第一步：安装依赖

npm install worker-loader -D

第二步：在项目根目录的vue.config.js中添加配置（没有该文件就新建）

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .end()
  }
}

第三步：调整page.vue代码如下：

import * as Comlink from "comlink";
// 用worker-loader前缀导入worker文件
import TestWorker from 'worker-loader!../../workers/worker.js'

export default {
  methods: {
    async tryOnClick() {
      const worker = new TestWorker();
      const workerApi = Comlink.wrap(worker);
      const res = await workerApi.trial();
      console.log(res);
    },
  },
};

注意事项