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(),
      };
    });