在vue項(xiàng)目中使用webWorker 時(shí)報(bào)錯(cuò)：Uncaught SyntaxError: Unexpected token '<'
網(wǎng)上大部分人說(shuō)是需要配置 inline 選項(xiàng)，不太準(zhǔn)確。
復(fù)盤一下整個(gè)安裝使用的過(guò)程
- 安裝
worker-loader
npm install worker-loader -D
- 配置
webpack
如果你的項(xiàng)目是基于 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線程收到主線程發(fā)來(lái)的消息', e) },400) }) self.postMessage('worker線程發(fā)送消息給主線程')
