Vue3+Vite项目中如何在Worker JS中导入WASM？

嗨，我来帮你搞定这个问题～你说用Rust写的wasm-pack打包的WASM库，在Worker里调用没反应也没报错，这种情况我之前也踩过坑，大概率是加载方式或者路径配置的问题，咱们一步步来解决：

• 首先确认WASM库的打包方式：
  一定要用wasm-pack build --target web命令打包，这个参数会生成适合浏览器环境的ES模块，而不是默认的Node.js模块，这是关键！打包后生成的文件里，mywasm.js就是可以在浏览器/Worker里导入的入口文件。

• 编写Worker文件（比如放在src/workers/wasm-worker.js）：
  因为WASM加载是异步的，所以必须用动态导入或者await import()，不能同步导入，而且要把初始化和调用逻辑包在async函数里，还要记得捕获错误（不然没报错信息真的抓瞎）：

  async function initWasm() {
    try {
      // 这里的路径根据你WASM文件的实际位置调整，比如我把打包后的WASM文件放在src/assets/wasm目录下
      const wasmModule = await import('../assets/wasm/mywasm.js');
      // 初始化WASM（wasm-pack生成的模块默认需要调用default方法初始化）
      await wasmModule.default();
      console.log('WASM加载成功！add函数可用');
  
      // 监听主线程发来的调用请求
      self.onmessage = (e) => {
        if (e.data.type === 'CALL_ADD') {
          const result = wasmModule.add(e.data.a, e.data.b);
          self.postMessage({ type: 'ADD_RESULT', data: result });
        }
      };
    } catch (err) {
      console.error('WASM加载失败：', err);
      self.postMessage({ type: 'ERROR', msg: err.message });
    }
  }
  
  initWasm();
  

• 在Vue组件中创建并使用Worker：
  Vite里创建Worker要注意路径写法，必须用new URL('./workers/wasm-worker.js', import.meta.url)来解析相对路径，而且要指定type: 'module'才能支持ES模块导入：

  <template>
    <div>
      <p>计算结果：{{ calcResult }}</p>
      <button @click="callWasmAdd">调用add(3,5)</button>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const calcResult = ref(null);
  let wasmWorker = null;
  
  onMounted(() => {
    // 创建Worker实例
    wasmWorker = new Worker(
      new URL('./workers/wasm-worker.js', import.meta.url),
      { type: 'module' }
    );
  
    // 监听Worker返回的消息
    wasmWorker.onmessage = (e) => {
      if (e.data.type === 'ADD_RESULT') {
        calcResult.value = e.data.data;
      } else if (e.data.type === 'ERROR') {
        console.error('Worker出错：', e.data.msg);
      }
    };
  
    // 监听Worker的错误事件
    wasmWorker.onerror = (err) => {
      console.error('Worker运行错误：', err);
    };
  });
  
  const callWasmAdd = () => {
    if (wasmWorker) {
      wasmWorker.postMessage({ type: 'CALL_ADD', a: 3, b: 5 });
    }
  };
  
  onUnmounted(() => {
    // 组件卸载时终止Worker，避免内存泄漏
    if (wasmWorker) {
      wasmWorker.terminate();
    }
  });
  </script>
  

• 最后调整Vite配置（vite.config.js）：
  确保Worker支持ES模块格式，还可以把WASM库加入预构建列表（如果你的WASM库是作为依赖安装的）：

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
    plugins: [vue()],
    worker: {
      format: 'es', // 指定Worker用ES模块格式
    },
    optimizeDeps: {
      // 如果你的WASM库是npm依赖，这里加入它的包名让Vite预构建
      include: ['mywasm']
    }
  });
  

几个要注意的坑：

• 绝对不能在Worker里同步导入WASM模块，必须异步加载，不然要么报错要么没反应
• 打包WASM时一定要加--target web，不然生成的模块在浏览器/Worker里无法正常导入
• Worker的类型必须设为module，否则不支持ES模块的import语法

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