标签：调用 页面 无法 mod media ESS enable 音频 pac
当我们需要在Vue项目中添加音频文件时，发现放到assets目录下的时候并不能播放。
两种常见的配置方法：
方法一：将音频文件放在static目录中，然后进行调用
<audio class=‘success‘ src="/static/audios/bgm.mp3"></audio>
缺点：打包后的dist文件中会有两份音乐文件，一件是打包后的media媒体文件中打包的音乐文件，还有一份是static中的自己audio的文件夹。可删除~
方法二：给项目配置mp3格式的解析器（推荐~）
1、在webpack.base.conf.js中添加加载器，如下：
{ test: /\.(mp3)(\?.*)?$/, loader: ‘url-loader‘, options: { name: utils.assetsPath(‘assets/[name].[hash:7].[ext]‘) } }
2、在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‘ } }
3、在页面添加audio标签，引入资源即可，此时的资源放在assets目录下即可
<audio class=‘success‘ src="../assets/audios/bgm.mp3"></audio>
此时重新启动项目或者重新打包，即可听到声音
标签：调用 页面 无法 mod media ESS enable 音频 pac
原文地址：https://www.cnblogs.com/helloyoyo/p/12718973.html
