React+Vite环境下FFmpeg Worker模块返回404问题排查与解决

我已将以下三个模块导入项目：

• @ffmpeg/core@0.12.6 的 ffmpeg-core.js
• @ffmpeg/core@0.12.6 的 ffmpeg-core.wasm
• @ffmpeg/core-mt@0.12.2 的 ffmpeg-core.worker.js

调用FFmpeg加载函数时，Worker模块出现404错误，请求URL为 http://localhost:3000/node_modules/.vite/deps/worker.js?worker_file&type=module，状态码404。

我已添加如下Vite配置，但问题仍未解决，加载始终无法完成：

export default defineConfig(({ mode }) => ({
  // 其他配置内容
  plugins: [react()],
  optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"]
  },
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp"
    }
  }
}));

加载FFmpeg的代码如下：

import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile, toBlobURL } from "@ffmpeg/util";

const ffmpeg = new FFmpeg();
await ffmpeg.load({
  coreURL: await toBlobURL(
    `${importedURL}/ffmpeg/ffmpeg-core.js`,
    "text/javascript"
  ),
  wasmURL: await toBlobURL(
    `${importedURL}/ffmpeg/ffmpeg-core.wasm`,
    "application/wasm"
  ),
  workerURL: await toBlobURL(
    `${importedURL}/ffmpeg/ffmpeg-core.worker.js`,
    "text/javascript"
  )
});

1. 统一依赖版本 #

当前混用了不同版本的@ffmpeg/core和@ffmpeg/core-mt，版本不匹配会导致加载异常。建议统一使用同版本的多线程核心包：

npm install @ffmpeg/core-mt@0.12.6

替换原有@ffmpeg/core，确保三个核心文件（js/wasm/worker.js）都来自同版本的@ffmpeg/core-mt。

2. 调整Vite配置 #

添加Worker文件的处理规则，同时将@ffmpeg/core-mt加入依赖排除列表：

export default defineConfig(({ mode }) => ({
  // 其他配置内容
  plugins: [react()],
  optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util", "@ffmpeg/core-mt"]
  },
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp"
    }
  },
  worker: {
    format: "es",
    plugins: [react()]
  }
}));

3. 修正路径解析逻辑 #

使用Vite内置的import.meta.env.BASE_URL拼接静态资源路径，避免自定义importedURL的解析错误：

await ffmpeg.load({
  coreURL: await toBlobURL(
    `${import.meta.env.BASE_URL}ffmpeg/ffmpeg-core.js`,
    "text/javascript"
  ),
  wasmURL: await toBlobURL(
    `${import.meta.env.BASE_URL}ffmpeg/ffmpeg-core.wasm`,
    "application/wasm"
  ),
  workerURL: await toBlobURL(
    `${import.meta.env.BASE_URL}ffmpeg/ffmpeg-core.worker.js`,
    "text/javascript"
  )
});

4. 确认静态资源位置 #

将三个核心文件放在项目的public/ffmpeg目录下，Vite会直接将其作为静态资源对外提供，不会进行额外编译干扰。

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