Vue.js加载mediainfo.js包报错：MediaInfoModule.wasm及文件404

核心问题分析 #

报错本质是Vite未正确处理mediainfo.js的WASM资源，且错误引用了未打包的源码文件（src/mediainfo.ts），导致资源路径匹配失败。

分步解决方案 #

• 1. 修正mediainfo.js的引入方式
  不要直接引用node_modules内的源码文件，改用官方打包后的入口：

  // 正确引入
  import MediaInfo from 'mediainfo.js'
  // 错误示例（禁止使用）
  // import MediaInfo from 'mediainfo.js/src/mediainfo.ts'
  

  同时确保安装最新版本依赖：

  npm install mediainfo.js@latest
  

• 2. 配置Vite支持WASM运行与资源定位
  修改vite.config.ts，添加WASM相关配置：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    // 禁止Vite预打包mediainfo.js，避免WASM路径被篡改
    optimizeDeps: {
      exclude: ['mediainfo.js']
    },
    // 添加WASM运行必需的跨域头
    server: {
      headers: {
        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Cross-Origin-Opener-Policy': 'same-origin'
      }
    }
  })
  

• 3. 手动指定WASM文件路径（若上述配置仍无效）

  1. 从node_modules/mediainfo.js/dist/目录复制MediaInfoModule.wasm到项目的public文件夹
  2. 初始化MediaInfo时显式指定WASM路径：

     const mediaInfoInstance = await MediaInfo({
       format: 'object',
       // 指向public目录下的WASM文件
       locateFile: (filename) => `/${filename}`
     })
     

• 4. 适配Vuero框架的特殊检查

  • 确认Vuero的内置配置未覆盖Vite的资源处理规则，比如是否有自定义的public目录设置
  • 检查项目打包后的输出目录，确认WASM文件是否被正确包含

调试技巧 #

• 打开浏览器开发者工具的「Network」面板，查看MediaInfoModule.wasm的请求路径，对比实际文件位置是否匹配
• 检查node_modules/mediainfo.js目录下是否存在dist/MediaInfoModule.wasm，若缺失则重新安装依赖

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