Vue3+Vite环境下FFmpeg初始化失败：document未定义错误求助

在 Vue3 + Vite 项目中使用 FFmpeg 插件时，执行 await ffmpeg.load() 出现 Uncaught ReferenceError: document is not defined 错误，导致 FFmpeg 无法正确初始化。

核心代码 #

<script setup>
import { FFmpeg } from '@ffmpeg/ffmpeg'
import { fetchFile, toBlobURL } from '@ffmpeg/util'
import { onMounted } from "vue";

// const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm' // doc - vite
const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm' // example

const ffmpeg = new FFmpeg();

onMounted(() => {
    initializeFfmpeg()
})

const initializeFfmpeg = async () => {
  await ffmpeg.load()
}
</script>

已尝试的解决方式 #

曾尝试手动指定核心文件路径加载，但问题依旧：

await ffmpeg.load({
    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
    wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
    workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
})

项目配置信息 #

package.json #

"dependencies": {
    "@ffmpeg/core": "^0.12.6",
    "@ffmpeg/ffmpeg": "0.12.6",
    "@ffmpeg/util": "^0.12.1",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.0"
  }

vite.config.js #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    optimizeDeps: {
        exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
    },
    server: {
        headers: {
            "Cross-Origin-Opener-Policy": "same-origin",
            "Cross-Origin-Embedder-Policy": "require-corp",
        },
    },
})

Node.js 版本 #

v18.18.2

请求协助排查该问题。

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