1.安装 worker-loader
yarn add worker-loader -D
npm install worker-loader -D
2.配置 vue.config.js
// webpack相关配置
chainWebpack: (config) => {
config.plugin("html").tap(args => {
args[0].title = "HTML标题";
return args;
});
// set worker-loader
config.module.rule("worker").test(/\.worker\.js$/).use("worker-loader").loader("worker-loader").end();
// 解决：worker 热更新问题
config.module.rule('js').exclude.add(/\.worker\.js$/);
// 解决：“window is undefined”报错，这个是因为worker线程中不存在window对象，因此不能直接使用，要用this代替
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>
