有的時候我們需要在vue中添加音頻文件，但是直接將音頻文件放置了assets目錄下的時候，會發現并不能正常播放，下面是兩種常用的配置方法：

方法一、將音頻文件放置在static目錄中，然后進行調用，如下所示

<audio class="success"     src="/static/audios/do_wrong.mp3"></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 屬性的內容轉換為模塊。

var utils = require('./utils')var config = require('../config')var isProduction = process.env.NODE_ENV === 'production'module.exports = { loaders: utils.cssLoaders({  sourceMap: isProduction   ? config.build.productionSourceMap   : config.dev.cssSourceMap,  extract: isProduction }), transformToRequire: {  "audio": "src" }}

3、添加audio標簽，引入資源文件

<audio autoplay="autoplay"     controls="controls"    preload="auto"    src="../assets/allright.mp3"></audio>

此時的資源文件放置在assets目錄下即可。

4、重新啟動項目或者打包發布，即可聽到聲音。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。