在Vue中，我們通常需要獲取外部文件的URL，比如圖片、音頻或者視頻等資源文件。這篇文章就來(lái)講一下如何在Vue中獲取文件的URL。

首先，我們需要在Vue中引入這個(gè)文件。比如說(shuō)，我們有一張名為“picture.jpg”的圖片，我們可以這樣在模板中引入它：

<template>
<img :src="pictureUrl" alt="picture" />
</template>
<script>
export default {
data() {
return {
pictureUrl: require('@/assets/picture.jpg')
}
}
}
</script>

在上面的代碼中，我們通過(guò)Vue提供的require函數(shù)將圖片引入到了Vue中。注意，這里的路徑是相對(duì)于src這個(gè)文件夾的，需要用“@/”前綴來(lái)表示。

接下來(lái)，我們就可以在Vue中通過(guò)這個(gè)URL獲取這張圖片了。我們可以將圖片URL傳遞給子組件，或者直接在模板中使用它：

<template>
<div>
<img :src="pictureUrl" alt="picture" />
<audio :src="audioUrl" controls />
<video :src="videoUrl" controls />
</div>
</template>
<script>
import Audio from '@/components/Audio.vue'
import Video from '@/components/Video.vue'
export default {
data() {
return {
pictureUrl: require('@/assets/picture.jpg'),
audioUrl: require('@/assets/audio.mp3'),
videoUrl: require('@/assets/video.mp4')
}
},
components: {
Audio,
Video
}
}
</script>

如上代碼，我們可以看到，除了獲取圖片URL之外，我們還可以獲取音頻和視頻的URL，只需要使用同樣的方式即可。同時(shí)，我們還引入了兩個(gè)子組件Audio和Video，用于展示音頻和視頻文件。