如何构建包含Web Worker与WASM的Vue+Vite项目？

嘿，我来帮你搞定在Vue+Vite项目里整合Web Worker和WASM的问题！看你给出的代码片段，应该是在导入Worker或者加载WASM的时候遇到了小坎，我一步步给你捋清楚正确的配置和写法：

一、先把Web Worker的导入搞对 #

你在Vue组件里的导入写了一半，Vite里导入Web Worker需要加特殊的后缀?worker，这样Vite才会把它当作Worker文件处理。完整的导入写法应该是这样：

<script setup>
import TestWorker from '@/test.worker.js?worker'
</script>

如果需要把Worker内联到主代码里（适合小体积的Worker），可以用?worker&inline后缀。

二、调整Web Worker里加载WASM的逻辑 #

你原来的Worker里用import("mywasm")的方式，在Vite环境下可能需要调整路径或者加载方式，这里给你两种靠谱的方案：

方案1：用WebAssembly.instantiateStreaming加载本地WASM文件 #

这种方式适合你自己编译的WASM文件，比如把WASM放在项目的public目录下，这样Vite会直接拷贝到打包后的根目录：

// ./src/test.worker.js
self.onmessage = async (event) => {
  try {
    // 加载public目录下的mywasm.wasm文件
    const response = await fetch('/mywasm.wasm');
    const { instance } = await WebAssembly.instantiateStreaming(response);
    
    // 调用WASM里的方法
    const { x, y } = event.data;
    const z = instance.exports.func(x, y);
    
    // 把结果发回Vue组件
    self.postMessage({ z });
  } catch (err) {
    console.error('加载WASM时出错啦:', err);
  }
};

方案2：动态导入WASM模块（适合npm安装的WASM包或Vite处理的WASM） #

如果你的WASM是通过npm安装的包，或者已经配置好Vite处理WASM的导入，可以用动态导入的方式：

// ./src/test.worker.js
// 先初始化WASM模块
import initWasm from 'mywasm';

(async () => {
  const wasm = await initWasm();
  
  // 初始化完成后再监听消息
  self.onmessage = (event) => {
    const { x, y } = event.data;
    const z = wasm.func(x, y);
    self.postMessage({ z });
  };
})();

三、Vite配置的小优化（按需添加） #

如果你的WASM包比较特殊，或者Worker需要ES模块支持，可以在vite.config.js里加这些配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  // 配置Worker的编译格式为ES模块
  worker: {
    format: 'es',
  },
  // 如果是第三方WASM包，排除预构建避免报错
  optimizeDeps: {
    exclude: ['mywasm'],
  },
});

四、Vue组件里完整使用Worker的示例 #

给你一个完整的组件代码，包含调用Worker、接收结果和组件卸载时销毁Worker的逻辑：

<template>
  <div class="worker-demo">
    <button @click="triggerWorkerCalc">调用Worker+WASM计算</button>
    <p class="result">计算结果：{{ computedResult }}</p>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import TestWorker from '@/test.worker.js?worker';

const computedResult = ref(null);
// 创建Worker实例
const worker = new TestWorker();

// 点击按钮发送消息给Worker
const triggerWorkerCalc = () => {
  worker.postMessage({ x: 15, y: 25 });
};

// 监听Worker返回的结果
worker.onmessage = (event) => {
  computedResult.value = event.data.z;
};

// 组件卸载时终止Worker，避免内存泄漏
onUnmounted(() => {
  worker.terminate();
});
</script>

<style scoped>
.worker-demo {
  margin: 20px;
}
.result {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
</style>

这样一套下来，你的Vue+Vite项目就能正常跑Web Worker加载WASM的逻辑啦，有问题再调整细节就行~

备注：内容来源于stack exchange，提问作者Fomalhaut