我在 vue 中为 ffmpeg.wasm 构建项目时遇到错误

Question

您好，当我使用$npm run build命令构建项目时，出现以下错误

我"vuetify": "^2.4.0"仍在使用 vuetify 因为 3.0 仍处于测试阶段所以我正在使用"vue": "^2.6.11",

这是我的package.json

{
   ....
   "dependencies": {
      "@ffmpeg/core": "^0.11.5",
      "@ffmpeg/ffmpeg": "^0.11.0",
      "core-js": "^3.6.5",
      "vue": "^2.6.11",
      "vue-router": "^3.5.3",
      "vuetify": "^2.4.0"
    },
    "devDependencies": {
      "@vue/cli-plugin-babel": "~4.5.0",
      "@vue/cli-plugin-eslint": "~4.5.0",
      "@vue/cli-service": "~4.5.0",
      "babel-eslint": "^10.1.0",
      "eslint": "^6.7.2",
      "eslint-plugin-vue": "^6.2.2",
      "sass": "~1.32.0",
      "sass-loader": "^10.0.0",
      "vue-cli-plugin-vuetify": "~2.4.5",
      "vue-template-compiler": "^2.6.11",
      "vuetify-loader": "^1.7.0"
    },
    "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "parserOptions": {
        "parser": "babel-eslint"
      },
      "rules": {}
    },
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not dead"
    ]
  }

注意："@ffmpeg/ffmpeg": "^0.10.1",当我更新它时它工作正常，"@ffmpeg/ffmpeg": "^0.11.0",但它不起作用

在我身上vue.config.js没有什么太多的，除了transpileDependencies

module.exports = {
  transpileDependencies: [
    'vuetify'
  ]
}

这是我上传的项目 https://easyupload.io/rl9xyd [高速下载]

注意：我想使用vuetify

问题：我想用"@ffmpeg/core": "^0.11.0", "@ffmpeg/ffmpeg": "^0.11.5" and来构建vuetify

请帮助我解决错误，提前致谢！

Answer 1

问题是在 ffmpeg 0.11 中，他们改变了 @ffmpeg/ffmpeg 导入核心的方式。这是更改它的提交https://github.com/ffmpegwasm/ffmpeg.wasm/commit/ff9c27e3bfdfb94484502cd9d355781bdba10265。Vue 2 使用 Webpack 4，它与 use 的此更改不兼容import.meta.url。Webpack 5 支持它，显然 Webpack 4 有加载器来解决它，但它们现在似乎已经死了。

我认为最简单的解决方案是使用 @ffmpeg/ffmeg 的预构建版本。您可以将 App.vue 中的导入更改为

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

到

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js';

使用预建的。这使得演示构建完成，但演示似乎没有执行任何操作，因此无法验证它是否有效。