vite-vue3使用web-worker应用指南和报错解决

主线程：初始化worker和监听子线程的消息

let worker: any; const salesConfigData = ref<any[]>([]); // 显示非上架 const showNotList = ref(false); // /src/views/ceshi/salesConfig/worker.js worker = new Worker(new URL("/src/views/ceshi/salesConfig/components/worker.js", import.meta.url), { type: "module", }); worker.onmessage = (e) => { console.log(777777887, e); salesConfigData.value = e.data; };

主线程：主动触发消息

watch( [() => props.salesConfigFeatrues, () => props.saleProductsOptions, showNotList], ([features, products, showNotListVal]) => { const filteredProducts = products.filter((p) => props.salesModel.includes(p.value)); const rawData = features.map((feature) => { const rawFeature = toRaw(feature); return { ...rawFeature, salesProducts: toRaw(rawFeature.salesProducts).slice(), }; }); console.log(777777880, features, products, rawData); worker.postMessage({ features: rawData, products: filteredProducts, showNotList: showNotListVal, }); }, { immediate: true } );

子线程：worker线程接受参数，处理数据，发消息

import { formatsalesConfigFeatrues } from "@/views/ceshi/salesConfig/utils"; self.onmessage = function (e) { console.log(777777881, e); const { features, products, showNotList } = e.data; const result = formatsalesConfigFeatrues(features, products, showNotList); self.postMessage(result); }; // self.addEventListener( // "message", // function (e) { // console.log(777777882, e); // self.postMessage("You said: " + e.data); // }, // false // );

经典错误1： [plugin:vite:worker-import-meta-url] Expression expected

解决办法：确保路径参数正确

worker = new Worker(new URL("/src/views/ceshi/salesConfig/components/worker.js", import.meta.url), { type: "module", });

经典错误2： DataCloneError: Failed to execute 'postMessage' on 'Worker': [object Array] could not be cloned. at watch.immediate

解决办法：传输的数据中存在proxy数组或者function等无法被拷贝的类型，这里处理数组：

const rawData = features.map((feature) => { const rawFeature = toRaw(feature); return { ...rawFeature, salesProducts: toRaw(rawFeature.salesProducts).slice(), }; });