8.添加图片、音频、视频失效？

问题：当我们需要在Vue项目中添加音频文件时，发现放到assets目录下的时候并不能播放？

注意：添加图片或视频遇到这类问题，处理方法类似！

 

方法一：将音频文件放在static目录中-->然后进行调用；
缺点：打包后的dist文件中会有两份音乐文件，一件是打包后的media媒体文件中打包的音乐文件，还有一份是static中的自己audio的文件夹

<audio src="../../../static/audio/audio1.mp3" controls loop preload=""></audio>

 

方法二：给项目配置mp3格式的解析器（推荐~）
注意：改完需要重新启动项目或者重新打包！！！

//步骤一：在webpack.base.conf.js中添加加载器
{
    test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
    loader: "url-loader",
    options: {
         name: utils.assetsPath("media/[name].[hash:7].[ext]")
    }
}
//步骤二：在vue-loader.conf.js文件中为audio的src属性添加转换属性选项，让vue-loader知道需要将audio的src 属性的内容转换为模块
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    audio:'src',  // 该属性
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}
//步骤三：在页面添加audio标签，引入资源即可，此时的资源放在assets目录下即可
<audio src="../../assets/audio/audio1.mp3" controls loop preload=""></audio>