Vue项目中使用web worker报错 Uncaught SyntaxError: Unexpected token <

（耗时两个小时的排错之路…）

Bug

在代码中直接使用worker会报错，如下图所示

Solution

初步排查是路径问题，实例化Worker的时候没有找到相应的worker文件。

排查思路: 根据worker的error信息发现filename为worker.js的文件无法在source中找到…

• 使用worker-loader
  • npm install -D worker-loader

然后在vue.config.js中添加worker-loader的配置，不是vue-cli 3.0的在build文件夹下找到相应的webpack配置文件进行修改

以下为vue.config.js的修改

  //添加web worker loader
  configureWebpack: config => {
    config.module.rules.push({
      test: /\.worker\.js$/,
      use: {
        loader: 'worker-loader',
        options: { inline: true }
      }
    })
  },

在实例化worker的代码中使用这样的代码去实例化：

import Worker from './export.worker' //此处worker-loader在打包时会导出一个Worker包裹的函数

  const worker = new Worker()
  worker.postMessage('begin')
  worker.onmessage = e => {
    console.log('get worker result ', e.data)
    worker.terminate()
  }
  worker.onerror = e => {
    console.log('something error with export.worker.js', e)
  }

跨域策略

前文中的配置之前由于（我）没写inline导致项目在运行时一直继续报Uncaught SyntaxError: Unexpected token <的错误，一直没有头绪。排查过程中发现一些很有意思的现象：

• 在项目运行阶段，拖动worker.js文件，通过热更新发现worker是可以运行的，但是重启项目就没有了
• 项目build之后会产生[hash].worker.js这个文件，但是dev运行的项目在浏览器source中无法找到这个文件
• 一度怀疑是vue路由拦截了js文件的获取，不过测试发现在地址栏输入app.js的路径发现能够正常获取

一直没搞清楚问题的成因，于是又去翻一翻已经看过好几遍的worker-loader文档，之前一直看的英文的，这次找了个中文的来看，果然找到了问题根源所在！

参考文章：
https://github.com/webpack-contrib/worker-loader
https://webpack.docschina.org/loaders/worker-loader/