如何在Nuxt.js项目中正确使用<audio/>标签加载MP3文件？

一、修复src="[object Module]"问题 #

问题根源是file-loader默认启用ES模块导出，导致require()返回模块对象而非路径字符串。修改nuxt.config.js配置，禁用ES模块导出：

extend (config, { isDev, isClient }) {
  config.module.rules.push({
    test: /\.(ogg|mp3|wav|mpe?g)$/i,
    loader: 'file-loader',
    options: { // 替换原query为webpack推荐的options
      name: 'static/raw/[name].[ext]', // 用[ext]适配所有音频格式，避免硬写.mp3
      esModule: false // 关键配置：让require直接返回路径字符串
    }
  })
},

二、实现MP3批量加载 #

用webpack的require.context批量读取static/music目录下的音频文件，替代手动逐个导入。修改musics.js：

// 创建上下文，读取static/music下所有.mp3文件
const musicContext = require.context('@/static/music', false, /\.mp3$/)

// 转换为目标数组格式
const listOfMusic = musicContext.keys().map(filePath => ({
  src: musicContext(filePath) // 此时返回的是直接可用的路径字符串
}))

// 如果需要和图片序号严格对应（如pic-1.png对应music-1.mp3），可添加排序逻辑
// const sortedFiles = musicContext.keys().sort((a, b) => {
//   const numA = parseInt(a.match(/\d+/)[0])
//   const numB = parseInt(b.match(/\d+/)[0])
//   return numA - numB
// })
// const listOfMusic = sortedFiles.map(filePath => ({ src: musicContext(filePath) }))

export default listOfMusic

三、调整页面模板绑定逻辑 #

遍历批量生成的音乐数组，确保索引和图片序号匹配：

<v-col v-for="(item, index) in music" :key="index">
  <v-card active-class="active">
    <v-img :src="require(`@/static/drawable/pic-${index + 1}.png`)" />
    <audio :src="item.src" controls/>
  </v-card>
</v-col>

<script>
import music from "~/constants/musics.js";

export default {
  setup(){
    return{ music }
  }
}
</script>

额外注意事项 #

1. 修改配置后重启Nuxt服务，并清理浏览器缓存，确保新配置生效；
2. 可在setup中打印console.log(music)验证路径是否正确；
3. 若使用Nuxt 3，需改用Vite的资源处理规则，配置逻辑略有不同。

内容的提问来源于stack exchange，提问作者oktay tontaş