How to use ffmpeg.wasm in vue+Vue-cli?

[yupengfei9147]

We meet a problem by a problem when we try to use ffmpeg.wasm for video compress in our front project.The project use vue+vue-cli.Have anyone used ffmpeg.wasm 0.12x version in your vue+vue-cli project successfully?

[incidentist]

I think I have figured it out, but there were many errors along the way, and the right way depends on your exact setup. Say more about the errors you are seeing, including console output, as well as the URLs you are using. For instance, I am loading index.html from localhost:8000 (python backend) but all JS is grabbed from localhost:5173 (Vite), and that is causing some problems. The ffmpeg worker files are set to fetch from unpkg, which causes other problems.

[yupengfei9147]

I copy the demo code to my project

ffmpeg.on("log", ({ message: msg }) => {
message.value = msg;
totalTime.value = (new Date().getTime() - startTime) / 1000;
});
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"),
});

when executed ffmpeg.load，I got problem from console like below:
Uncaught (in promise) Error: Cannot find module"http://10.18.2.208:8080/c293e02d-2742-47c0-9e255-b7cbfe713d06