在vue项目中使用webWorker 时报错：Uncaught SyntaxError: Unexpected token '<'
网上大部分人说是需要配置 inline 选项，不太准确。
复盘一下整个安装使用的过程
- 安装
worker-loader
npm install worker-loader -D
- 配置
webpack
如果你的项目是基于 vue/cli 搭建的， 可以在 vue.config.js 中找到 loader 的配置位置。如果不是，在webpack.base.conf.js 中找到 loader 的配置位置
添加一行配置。 切记！ 一定要写在 /\.js$/ 这种匹配js文件的loader之前。
{
...
},
{
test: /\.worker\.js$/,
loader: "worker-loader",
options: {
inline: true,
name: "workerName.[hash].js"
}
},
{
test: /\.js$/,
...
}
-
使用例子
// test.vue 主线程 import Worker from './file.worker.js' methods:{ test() { let worker = new Worker(); let data1 = '1' let data2 = '2' worker.postMessage([data1,data2]); worker.onmessage = function(event) { console.log(event,'event1') }; worker.addEventListener("message", function(event) { console.log(event,'event2') }); } }// file.worker.js worker线程 self.addEventListener("message",e=>{ setTimeout(()=>{ console.log('worker线程收到主线程发来的消息', e) },400) }) self.postMessage('worker线程发送消息给主线程')
