在web應用開發中，背景音樂經常被用來增加用戶體驗和頁面互動性。在Vue中，添加背景音樂也是非常簡單的。本文將詳細介紹如何在Vue中添加背景音樂。

首先，我們需要在Vue項目中添加背景音樂文件。我們可以將MP3、WAV或其他音頻文件放在項目的靜態資源目錄中。在Vue CLI生成的項目中，靜態資源目錄是“public”目錄。將背景音樂文件放到“public”目錄下的“assets”文件夾中。如下：

public
└── assets
└── bgm.mp3

然后，在Vue組件中加載背景音樂。我們可以在App.vue根組件中的created()鉤子函數添加以下代碼：

created () {
let audio = new Audio()
audio.src = '/assets/bgm.mp3'
audio.loop = true
audio.play()
}

以上代碼創建一個新的Audio對象，然后設置音頻文件的src為背景音樂的路徑。loop屬性將背景音樂設置為循環播放。最后，調用play()方法播放音樂。

如果我們想要控制背景音樂的播放和暫停，可以在Vue組件中添加一個方法。例如，我們可以在App.vue中添加一個按鈕，并在標簽上綁定一個click事件。在事件處理程序中，我們可以添加以下代碼：

// 綁定click事件Toggle BGM// 添加方法
methods: {
toggleBackgroundMusic () {
let audio = document.getElementsByTagName('audio')[0]
if (audio.paused) {
audio.play()
} else {
audio.pause()
}
}
}

以上代碼創建了一個toggleBackgroundMusic()方法，當按鈕被點擊時將會觸發它。該方法獲取文檔中的第一個audio元素，并根據當前音樂是否暫停來控制播放和暫停。

最后，我們需要在Vue組件中正確卸載背景音樂。我們可以在App.vue中的destroyed()鉤子函數中添加以下代碼：

destroyed () {
let audio = document.getElementsByTagName('audio')[0]
audio.pause()
audio.src = ''
}

以上代碼在組件銷毀前暫停音樂，并將音樂文件的src設為空字符串，以釋放內存。

在Vue中添加背景音樂非常簡單。我們可以將音樂文件放在“public”目錄中的“assets”文件夾下，并在Vue組件中加載音樂。通過添加事件處理程序，我們可以使音樂播放和暫停。最后，在組件銷毀前正確卸載音樂可以釋放內存。