Vue訪問Public文件夾全過程
說明
為什么需要訪問Public文件夾的內(nèi)容？
一般都是放在assets下面，但是無法實(shí)現(xiàn)動(dòng)態(tài)訪問，這就造成如果你要?jiǎng)討B(tài)加載一個(gè)圖片或者視頻是不行的。
比如：我現(xiàn)在把testHuawei.mp4放在assets文件夾下面，那么他會(huì)被打包，這時(shí)候，運(yùn)行，你找到這個(gè)圖片，它的路徑為：
http://localhost:8081/media/testHuawei.c4367207.mp4
多出一個(gè)c4367207（這是內(nèi)部為了安全），這樣你在寫代碼無法動(dòng)態(tài)加載，因?yàn)橹灰俏募灰粯樱傻臄?shù)值也是不一樣。
所以，我們有時(shí)候不需要生成一堆無用的數(shù)，可以把文件放在Public文件夾中，這樣，里面的資源就不會(huì)被打包，可以直接用路徑進(jìn)行訪問。
如何訪問
首先在vue.config.js
在vue文件中使用
publicPath: process.env.BASE_URL
以上就可以直接訪問，可以動(dòng)態(tài)訪問
字符串的拼接
這里可以根據(jù)電影的ID，就可以拼接成
1.mp4 2.mp4 3.mp4
這樣就是實(shí)現(xiàn)了動(dòng)態(tài)訪問。
它的訪問路徑為
http://localhost:8081/1.mp4 http://localhost:8081/2.mp4 http://localhost:8081/3.mp4
擴(kuò)展
常見
<img src="./assets/images/01.jpg" alt=""> // √ // 編譯后: <img src="/img/01.f0cfc21d.jpg" alt="">
常見的引入方式，路徑是固定的字符串，圖片會(huì)被webpack處理，文件若丟失會(huì)直接在編譯時(shí)報(bào)錯(cuò)，生成的文件包含了哈希值
require
<img :src="require('./assets/images/03.jpg')" alt=""> // √
<img :src="require('./assets/images/'+ this.imgName +'.jpg')" alt=""> // √
<img :src="img3" alt=""> // √
<script>
export default:{
data(){
return {
imgName:'03.jpg',
img3:require('./assets/images/03.jpg'),
}
},
}
</script>
// 編譯后:
<img src="/img/03.ea62525c.jpg" alt="">
當(dāng)路徑的文件名需要拼接變量的時(shí)候，可使用 require() 引入，在 template 的:src 或者 script 的 datacomputed 中都可以進(jìn)行 require 引入或拼接
本文所用的
<img :src="this.publicPath + 'i.jpg'" alt=""> // √
// 編譯后:
<img src="/foo/i.jpg" alt="">
<script>
export default:{
data(){
return {
publicPath: process.env.BASE_URL,
}
},
}
</script>
//vue.config.js
module.exports = {
publicPath:'/foo/',
...
}
引入publicPath并且將其拼接在路徑中，實(shí)現(xiàn)引入路徑的動(dòng)態(tài)變動(dòng)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 實(shí)現(xiàn)列表動(dòng)態(tài)添加和刪除的兩種方法小結(jié)
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)列表動(dòng)態(tài)添加和刪除的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了詳解vue組件通信的三種方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
在我們的印象使用中，vue除了寫業(yè)務(wù)代碼沒有特別新奇的功能了，今天就來看看如何自動(dòng)化生成vue組件文檔2021-06-06
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細(xì), 具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2023-11-11
解決vue elementUI 使用el-select 時(shí) change事件的觸發(fā)問題
這篇文章主要介紹了解決vue elementUI 使用el-select 時(shí) change事件的觸發(fā)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了快速解決element的autofocus失效問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue 集成jTopo 處理方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-08-08
關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析
這篇文章主要介紹了關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
vue element編輯框根據(jù)值動(dòng)態(tài)確認(rèn)是否是必填項(xiàng)required true or&n
該文章主要介紹了在編輯數(shù)據(jù)時(shí),根據(jù)是否有時(shí)間數(shù)據(jù)來決定某項(xiàng)是否為必填項(xiàng),作者提供了一個(gè)簡單的解決方法,并分享了HTML表單代碼和校驗(yàn)規(guī)則,最后表示希望對(duì)讀者有所幫助2026-04-04
vue項(xiàng)目在public index.html文件中添加變量方式
這篇文章主要介紹了vue項(xiàng)目在public index.html文件中添加變量方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-08-08