Vue项目中使用web worker报错 Uncaught SyntaxError: Unexpected token <
Bug在代码中直接使用worker会报错,如下图所示Solution
·
(耗时两个小时的排错之路…)
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/
更多推荐
已为社区贡献16条内容
所有评论(0)