vue webworker使用

1、配置worker-loader

下载worker-loader

npm install worker-loader

在vue.config.js中配置

   config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .end()
    config.module.rule('js').exclude.add(/\.worker\.js$/)

2、创建以.worker.js结尾的文件

// demo.worker.js
self.onmessage = function(event) {

  if(event.data.type==1){
    self.postMessage({name:self.name,type:2,msg:"空闲"})  //发送消息
  }
  if(event.data.type==3){
    self.postMessage(event.data)
  }

  if(event.data.type==2){
    self.postMessage(event.data)
  }

  if(event.data.type==4){
    self.close();
  }
};

3、在需要的地方引用

import Worker from './download.worker'

let worker = new Worker();
worker.onmessage = e => {
    //处理监听到的消息
}
worker.onerror = (err) => {
	console.log(err.filename, err.lineno, err.message); // 发生错误的文件名、行号、错误内容
};

注意：

1、postMessage操作流程：demo.worker.js文件中发送的消息须在实例化Worker的文件中处理消息，反之实例化Worker的文件中发送的消息则会在demo.worker.js文件中监听到；

2、demo.worker.js文件中是没有window对象的，所以需要处理业务流程时，须在实例化Worker的文件中进行。