我在vue for ffmpeg.wasm中构建项目时出错了

Question

嗨，当我用$npm运行build命令构建这个项目时，我会遇到下面的错误

​

​

我仍然使用vuetify "vuetify": "^2.4.0"，因为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.11.0",时，它与"@ffmpeg/ffmpeg": "^0.10.1",一起工作得很好--它不起作用

在我的vue.config.js里什么都没有，除了transpileDependencies

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

这里是我以高速上传了我的项目 https://easyupload.io/rl9xyd下载

注：我想使用vuetify

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

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

Answer 1

问题是，在ffmpeg 0.11中，他们改变了@ffmpeg/ffmpeg导入核心的方式。这是将其更改为https://github.com/ffmpegwasm/ffmpeg.wasm/commit/ff9c27e3bfdfb94484502cd9d355781bdba10265的提交。Vue 2使用Webpack 4，这是不兼容的改变，使用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';

使用预建好的。这使得演示构建，但演示似乎什么都不做，所以不能验证它的工作。

Answer 2

当我试图安装时，存在依赖关系冲突：

​

​

因此，由于这是一个旧的Vue项目，从更新它们开始

当我阅读样板Vue项目时：样板Ffmpeg

我看到他们的版本是"@ffmpeg/ffmpeg": "^0.11.5",

我认为您将两者混合使用，并在core中使用：ffmpeg/核

你要做的是：

1. 核心版本应该是：0.11.0
2. @ffmpeg/ffmpeg应为^0.11.5

在更新所有这些之后，我可以让构建完美地工作：

​

​

这里有我所拥有的package.json，如果问题持续存在，这意味着您对如何使用某些东西而不是依赖项有问题。

  ...
  "dependencies": {
    "@ffmpeg/core": "^0.11.0",
    "@ffmpeg/ffmpeg": "^0.11.5",
    "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"
  ]