关于Vue2中使用Web Worker【热更新】

wanxy4202025-08-30 10:46

环境配置

安装

js 复制代码

npm install worker-loader

热更新 config配置

js 复制代码

module.exports = {
   chainWebpack: (config) => {
     config.module
      .rule("worker")
      .test(/\.worker\.js$/)
      .use("worker-loader")
      .loader("worker-loader")
      .options({
        inline: "fallback",
      })
      .end();
    config.module.rule("js").exclude.add(/\.worker\.js$/);
   }
}

开始编写worker文件

我这边在项目的src/worker文件夹中创建应该test.worker.js

test.worker.js的

js 复制代码

// 接受主线程发送的通讯
self.addEventListener("message", (e) => {
  const data = e.data;
  
  self.postMessage("线程向主线程发送信息"); // 向主线程发送通讯

  self.terminate(); // 关闭当前线程
});

主线程项目文件，这里使用App.vue

vue 复制代码

<template>
  <div></div>
</template>

<srcipt>
import TestWorker from '@/worker/test.worker.js'

export default {
  name: "App",
  mounted() {},
  methods: {
    handleStartWorker() {
      const worker = new TestWorker();
      worker.postMessage("向子线程发送通讯");
      worker.addEventListener("message", (e) => {
        console.log(e) // 接受子线程发送的通讯数据
      })
    }
  },
};
</srcipt>