WebAssembly 启用 SIMD 后在 Vue 项目中报错怎么办？

W″利利提问于 2026-03-12 17:55:22 阅读 2

前端

我在 Vue 项目里尝试用 WebAssembly 的 SIMD 指令加速图像处理，本地开发能跑，但一构建上线就报 “SIMD is not supported”。明明浏览器支持 SIMD 啊，是不是我加载方式有问题？

我试过在 wasm 编译时加 -msimd128，也确认了 Chrome 版本支持，但还是不行。下面是我组件里加载 wasm 的代码：

<script setup>
import initWasm from '@/wasm/image_process_bg.js';

onMounted(async () => {
  try {
    const wasm = await initWasm();
    wasm.process_pixels(new Uint8Array(1024));
  } catch (e) {
    console.error('WASM SIMD failed:', e);
  }
});
</script>

SIMD支持

我来解答赞 3 收藏

反馈

1 条解答

Zz慧红 Lv1

问题大概率出在 Vite 构建后加载路径上了。SIMD 需要特殊的 JS polyfill 代码，你那个 image_process_bg.js 打包后可能没正确引入 simd128 支持。

试试改成静态 import 或者在 Vite config 里配置 optimizeDeps 包含你的 wasm：

// vite.config.js

export default defineConfig({

  optimizeDeps: {

    exclude: ['@/wasm']

  },

  build: {

    target: 'esnext'  // 确保这个

  }

})

然后改一下组件里的加载方式，用 defineAsyncComponent 或者直接 import 整个模块，别动态 import：

// 直接 import，别 await import

import initWasm from '@/wasm/image_process_bg.js';



onMounted(async () => {

  const wasm = await initWasm({

    // 显式指定 simd 支持

    simd: true

  });

  wasm.process_pixels(new Uint8Array(1024));

});

如果还不行，看看构建后实际加载的 JS 文件里有没有 simd128 的 polyfill 代码，没有的话手动在 index.html 里引入一下。

2026-03-12 18:01