Vue cli3 脚手架,加载 mp3 文件

先把 mp3 文件放到 src/assets/ 文件夹下

这里列出三种加载方式:

  1. 直接 require('path/to/x.mp3'),这里的使用的是相对路径
  2. 直接把 src 写在 audio 标签是不行的,默认配置没有支持 audio 的 src 属性

    <audio controls>
        <source src="path/to/x.mp3">
    </audio>
  3. 想要支持 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;
            });
      }
    }

    配置来自:GH

评论