Vue项目集成ffmpeg.wasm与Vuetify时构建报错求助

1. 配置 Webpack 转译 @ffmpeg 依赖 #

Vue 2 项目默认 babel-loader 不转译 node_modules 内的包，而 @ffmpeg 0.11.x 可能使用了未转译的 ES6+ 语法，导致构建报错。在 vue.config.js 中添加转译规则：

module.exports = {
  // 保留原有配置...
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          include: [
            /node_modules\/@ffmpeg/,
            /node_modules\/@babel\/runtime/
          ],
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }
}

2. 清理依赖缓存并修复依赖冲突 #

执行以下命令彻底重置依赖：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

若项目缺少必要的 Babel 依赖，补充安装：

npm install @babel/preset-env babel-loader --save-dev

3. 适配 FFmpeg 核心资源打包规则 #

如果构建后出现 WASM/核心文件加载失败，在 vue.config.js 中添加资源处理规则：

module.exports = {
  // 保留原有配置...
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  chainWebpack: config => {
    config.module
      .rule('wasm')
      .test(/\.wasm$/)
      .type('javascript/auto')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: '[name].[hash:8].[ext]',
        outputPath: 'assets/ffmpeg/'
      })
  }
}

4. 调整 FFmpeg 初始化代码适配新版本 #

确保初始化时指定正确的核心文件路径：

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

const ffmpeg = createFFmpeg({
  log: true,
  corePath: process.env.NODE_ENV === 'production' 
    ? './assets/ffmpeg/ffmpeg-core.js' 
    : 'https://unpkg.com/@ffmpeg/core@0.11.5/dist/ffmpeg-core.js'
})

5. 确保 Vuetify 打包配置正常 #

若存在样式或插件冲突，在 vue.config.js 中明确 Vuetify 插件配置：

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
  // 保留原有配置...
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin()
    ]
  }
}

完成以上配置后，重新执行 npm run build 即可完成构建。

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