主要分为两个文件,一个worker文件和一个main文件(调用worker)。worker文件需要以worker.js为后缀。可以直接使用worker.js或者xx.worker.js都可以。self.onmessage=(e)=>{console.log("worker收到消息e--",e.data);for(letindex=0;index<9999999999;index++){if(index===9999999999-1){self.postMessage("计算结束");}}};主文件,调用的地方可以是vue文件,也可以是js文件。这取决于每个人的需求。这里我们以vue文件为例importXXfrom"./xx.worker";//这个路径根据自己的实际情况配置...created(){letxx=newXX();xx.postMessage({start:"开始计算"});xx.onmessage=(msg)=>{console.log("msg--",msg);};}相互之间的通信主要靠postMessage和onmessage。核心代码就是这样,非常简单。下面说一下vue下vue.config.js的配置。前提是npminstallworker-loader-DchainWebpack:(config)=>{config.module.rule("worker").test(/\.worker\.js$/).use("worker-loader").loader("worker-loader").options({inline:"fallback"});config.module.rule("js").exclude.add(/\.worker\.js$/);},
