问题总结：在vue-cli3里面使用audio标签

Vue中解决audio标签加载问题

最新推荐文章于 2025-08-27 15:43:51 发布

原创最新推荐文章于 2025-08-27 15:43:51 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue-cli

vue-cli 专栏收录该内容

2 篇文章

订阅专栏

本文介绍在Vue项目中使用audio标签时遇到的加载失败问题及解决方案。通过在vue.config.js中配置loader，使audio的src属性能够正确加载资源。

在最开始直接使用audio标签，一直加载不出来，也没有报错，

<audio controls src='./assets/music/1.mp3'></audio>

后来在在网上查询发现想要支持 audio 的 src 属性，要在 vue.config.js 自定义下 loader 配置，如下

module.exports = {
  chainWebpack: config => {
    config
      .module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
options.transformAssetUrls = {
  audio: 'src',
}
return options;
        });
  }
}

就解决了

参考链接：https://blog.jiayx.net/archives/321.html