浏览器加载ONNX模型失败：无法找到ort-wasm-simd.wasm文件

问题原因 #

onnxruntime-web在浏览器运行时会自动请求对应的wasm文件（如ort-wasm-simd.wasm），但Vite默认不会将node_modules中的wasm文件暴露到静态资源路径下，导致请求404。同时本地模型的路径配置也需要适配Vite的静态资源规则。

解决方法 #

方法一：手动复制wasm文件到public目录 #

1. 找到node_modules/onnxruntime-web/dist/目录下的所有.wasm文件（通常包括ort-wasm.wasm、ort-wasm-simd.wasm、ort-wasm-threaded-simd.wasm），复制到项目根目录的public文件夹中。
2. 将你的.onnx模型文件也移动到public文件夹下（避免Vite对src目录资源的hash重命名导致路径失效）。
3. 修改代码配置wasm路径并加载模型：

import * as ort from 'onnxruntime-web';

const App = () => {
    const create = async () => {
        // 指定wasm文件的基础路径（public根目录对应网站根路径）
        ort.env.wasm.wasmPaths = '/';
        // 加载public目录下的模型文件
        const session = await ort.InferenceSession.create('/silero_vad.onnx');
        // 后续可添加推理逻辑
    };
    create();

    return <>Hello world</>;
};

export default App;

方法二：用Vite插件自动复制wasm文件 #

如果不想手动复制文件，可借助插件自动同步：

1. 安装插件：

npm install vite-plugin-static-copy --save-dev

2. 在vite.config.js中添加配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    react(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/onnxruntime-web/dist/*.wasm',
          dest: '.' // 将wasm文件复制到输出目录的根路径
        }
      ]
    })
  ]
});

3. 同样修改代码中的模型路径和wasm配置（同方法一的代码部分）。

方法三：配置Vite的资源解析规则 #

通过Vite的配置直接识别wasm资源：

1. 修改vite.config.js：

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

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.wasm'], // 让Vite识别wasm文件为静态资源
  resolve: {
    alias: {
      // 为onnxruntime的wasm文件设置别名，确保路径可被解析
      'ort-wasm-simd.wasm': 'onnxruntime-web/dist/ort-wasm-simd.wasm'
    }
  }
});

2. 在代码中设置wasm路径为node_modules对应的路径（开发环境可用，构建时需确保资源被正确打包）：

ort.env.wasm.wasmPaths = '/node_modules/onnxruntime-web/dist/';

内容的提问来源于stack exchange，提问作者jojeyh