使用vue編寫的草稿箱出現(xiàn)了視頻無法加載的問題。在檢查了代碼后發(fā)現(xiàn)，問題出現(xiàn)在視頻路徑的設(shè)置上。

<template>
<div class="draft-box">
<ul class="video-list">
<li v-for="(item, index) in videoList" :key="index">
<video :src="item.path" controls></video>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
videoList: [
{ id: 1, name: "視頻1", path: "./assets/video1.mp4" },
{ id: 2, name: "視頻2", path: "./assets/video2.mp4" },
{ id: 3, name: "視頻3", path: "./assets/video3.mp4" }
]
};
}
};
</script>

以上是該頁面的代碼，視頻路徑使用了相對路徑并且視頻文件也放置在了項目的assets文件夾中。但是在調(diào)試過程中發(fā)現(xiàn)，視頻無法被加載出來。經(jīng)過檢查，發(fā)現(xiàn)問題在相對路徑上。在vue中，相對路徑應(yīng)該以“@/”開頭。因此，將代碼中視頻路徑的相對路徑修改為“@/assets/video.mp4”即可正常加載。

經(jīng)過以上修改，大家在使用vue編寫草稿箱等功能時，就不會遇到視頻無法加載的問題了。