vue使用webworker

时间:2022-9-14    作者:悬浮的青春    分类:


1.安装 worker-loader

yarn add worker-loader -D
npm install worker-loader -D

2.配置 vue.config.js


  chainWebpack: (config) => {
    config.plugin("html").tap(args => {
      args[0].title = "HTML标题";
      return args;
    });

    config.module.rule("worker").test(/\.worker\.js$/).use("worker-loader").loader("worker-loader").end();

    config.module.rule('js').exclude.add(/\.worker\.js$/);

    config.output.globalObject('this');
  },

3.demo.worker.js

console.log(self)

addEventListener('message', function (e) {
  console.log(e, "message")

  const { data } = e;
  switch (data.route) {
    case "end":
      self.close();
      break;
    default:
      console.log("default");
  }

}, false);

4.使用

<script setup name="Home">
import demoWorker from "@/worker/demo.worker";

const worker = new demoWorker();
worker.postMessage({ name: "demo", age: 18 });
</script>

WRITTEN BY

avatar