html

<audio controls="controls"   ref='audio' >
  <source  :src="musicUrl"  type="audio/mpeg">
</audio>
<el-button type="primary" @click="play">播放音樂</el-button>

js

data(){
  return{
    //動態(tài)加載需要使用require,否則會將數(shù)據(jù)轉(zhuǎn)換成字符串類型
    musicUrl: require("./resource/music/回憶的沙漏.mp3") 
  },
  methods:{
    play(){
    var audio=this.$refs.audio
    this.musicUrl=require("./resource/music/知否知否.mp3") 
    //更改src后需要重新加載音樂
    audio.load()
    audio.play()
    }
}

如果不想在html中創(chuàng)建標(biāo)簽,還可以這樣寫

methods:{
  play(src){
    var audio=new Audio
    this.musicUrl=require("./resource/music/知否知否.mp3") 
    //更改src后需要重新加載音樂
    audio.load()
    audio.play()
}
},

如果想往require里傳遞變量,可以使用地址拼接的方式
require("/root/"+data)