Nuxt.js应用配置音频加载规则后仍无法播放音频问题求助

1. 配置层级校验 #

首先确认nuxt.config.js中的webpack相关配置是否放在build字段下，这是最常见的配置错误点，正确的完整配置参考如下：

export default {
  // 其他项目全局配置项
  build: {
    loaders: {
      vue: {
        transformAssetUrls: {
          audio: 'src',
        },
      },
    },
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    }
  }
}

2. 路径规则校验 #

• 如果你的项目没有src根目录，将引用路径中的@替换为~，即~/assets/audios/podcast1.mp3
• 也可以直接将音频文件放到项目根目录的static（Nuxt2）或public（Nuxt3）文件夹下，引用路径直接写/audios/podcast1.mp3即可，无需额外webpack配置

3. 依赖校验 #

执行命令安装缺失的file-loader依赖：

npm install file-loader --save-dev
# 或yarn环境
yarn add file-loader -D

4. Nuxt3适配 #

如果是Nuxt3版本，默认使用Vite构建，原webpack配置不生效，更换为如下配置即可：

export default defineNuxtConfig({
  assets: {
    include: ['**/*.mp3', '**/*.wav', '**/*.ogg']
  }
})

5. 服务重启 #

所有配置修改完成后，必须完全停止当前开发服务，重新执行nuxt dev启动，热更新不会加载新的构建配置。

如果以上操作完成后仍无法播放，可打开浏览器控制台查看网络请求中音频文件的返回状态，404错误优先排查路径配置，其他加载错误排查对应构建规则。

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