如何配置vue-loader使Vue CLI 3项目支持音频文件加载？

根因说明 #

报错是因为Vue CLI 3默认的webpack配置没有包含.m4a格式的音频文件处理规则，webpack无法识别该类型文件，因此抛出loader缺失的错误。 #

操作步骤 #

• 第一步：在项目根目录（与package.json同级路径）新建vue.config.js文件，若文件已存在则直接修改内容，添加如下配置：

module.exports = {
  chainWebpack: config => {
    // 新增音频文件处理规则
    config.module
      .rule('audio')
      .test(/\.(m4a|mp3|ogg|wav)$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        // 配置打包后音频文件的输出路径和命名规则
        name: 'assets/audio/[name].[hash:8].[ext]'
      })
  }
}

• 第二步：保存配置文件后，重启本地开发服务，vue.config.js的修改只有重启服务后才会生效。

备选快速方案 #

如果不想修改配置，可以直接把音频文件放到项目public目录下，修改组件内的引用路径即可，无需走webpack打包处理：

<source src="/Catastrophe03music.m4a" type="audio/mp4" />

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