Vite自动处理@swc/wasm-web依赖中WASM文件的配置方法

针对你遇到的问题，结合Vite 4.0.3的特性，以下是两种可行的配置方案：

方案一：强制预构建+资源识别 #

修改你的vite.config.ts，添加以下配置：

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

export default defineConfig({
  plugins: [react()],
  // 强制Vite预构建@swc/wasm-web包，自动处理其依赖的WASM文件
  optimizeDeps: {
    include: ['@swc/wasm-web'],
  },
  // 让Vite识别node_modules中的WASM文件为资源
  assetsInclude: ['node_modules/@swc/wasm-web/*.wasm'],
});

配置后，Vite会在预构建阶段自动将@swc/wasm-web的WASM文件复制到node_modules/.vite/deps目录，无需手动操作。

方案二：手动指定WASM文件URL（更可靠） #

如果方案一不生效，可以通过显式导入WASM文件的URL，让SWC加载处理后的资源：

1. 先在代码中导入WASM文件的URL：

import swcWasmUrl from '@swc/wasm-web/wasm-web_bg.wasm?url';

2. 修改SWC的初始化代码，指定WASM路径：

const swcWasmWeb = await import('@swc/wasm-web');
await swcWasmWeb.default({
  wasmUrl: swcWasmUrl,
});

3. 同时在vite.config.ts中保留资源识别配置：

assetsInclude: ['**/*.wasm'],

这种方式直接指定了SWC要加载的WASM资源地址，避免了路径匹配问题，适配性更强。

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