vue引用public目錄下文件的方式詳解
有時(shí)候我們?cè)陂_發(fā)h5時(shí)候,會(huì)有需要綁卡授權(quán)操作,這個(gè)時(shí)候需要同意某些協(xié)議并且這些協(xié)議是可以點(diǎn)擊打開的,這種該怎么做呢?
其實(shí)這就是一個(gè)鏈接,前端能夠打開鏈接并且常用的也就是a標(biāo)簽喝vue自帶的router-link,當(dāng)然其他還有,通常來說a標(biāo)簽就夠了
關(guān)于協(xié)議的存儲(chǔ),這里簡(jiǎn)單說下,在實(shí)際開發(fā)中,協(xié)議存儲(chǔ)有以下幾種:
1、存放在前端,一種是直接放在public靜態(tài)資源文件夾下,webpack打包不會(huì)對(duì)其處理,直接把文件復(fù)制到存放項(xiàng)目的工程目錄下;還有一種就是托管在cdn上,類似靜態(tài)資源托管,會(huì)有一個(gè)域名,這個(gè)域名下放的都是靜態(tài)資源比如圖片呀之類的。通常來說,第一種最簡(jiǎn)單。
2、存放在一個(gè)中臺(tái),這個(gè)中臺(tái)不是系統(tǒng)不是一個(gè)項(xiàng)目,而是公司內(nèi)一個(gè)組織劃分,支撐著其他部門的項(xiàng)目,通常就是前端編寫協(xié)議內(nèi)容,然后把協(xié)議存放的絕對(duì)路徑給到中臺(tái)相應(yīng)開發(fā),他們會(huì)做些處理最后返回一個(gè)完整的帶有域名的文件地址,比如http:xxxx/zyxj/1.html,然后把帶有詳細(xì)信息返回給前端,前端直接渲染。
以上倆種方法我都參與過,今天說第一種。
第一種就是把靜態(tài)資源放在public里面,vue頁(yè)面地址的話填寫絕對(duì)路徑,就是不需要帶有public前綴,因?yàn)閷?shí)際上線的話,webpack是吧public下面很多文件復(fù)制到根目錄/或者某個(gè)項(xiàng)目目錄下,比如/index.html,1.css,1.html或者myapp/index.html,1.css,1.html。

頁(yè)面使用的話如截圖:

??注意?? 上面說的情況生產(chǎn)部署到根目錄下頁(yè)面上使用的方法,但是我們?cè)趺粗理?xiàng)目是不是部署到根目錄呢?
1、配置文件查看項(xiàng)目部署位置:

如果你的項(xiàng)目不是部署在跟目錄,但是也不知道具體部署到哪個(gè)目錄,不用擔(dān)心,只要在config文件做個(gè)判斷如果是生產(chǎn)環(huán)境部署到哪里,如下:
const BASE_URL=process.env.NODE_ENV==='production'?'Utility':'/'
publicPath:BASE_URL
data(){
return {
publicPath:process.env.BASE_URL
}
}



總結(jié)
到此這篇關(guān)于vue引用public目錄下文件的文章就介紹到這了,更多相關(guān)vue引用public文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解
今天小編就為大家分享一篇Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
詳解vue2.0監(jiān)聽屬性的使用心得及搭配計(jì)算屬性的使用
這篇文章主要介紹了vue2.0之監(jiān)聽屬性的使用心得及搭配計(jì)算屬性的使用,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件,我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個(gè)基本的使用方式,需要的朋友可以參考下2023-03-03
解決element ui el-row el-col里面高度不一致問題
這篇文章主要介紹了解決element ui el-row el-col里面高度不一致問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3實(shí)現(xiàn)無縫滾動(dòng)組件的示例代碼
在日常開發(fā)中,經(jīng)常遇到需要支持列表循環(huán)滾動(dòng)展示,特別是在數(shù)據(jù)化大屏開發(fā)中,所以小編今天為大家介紹一下如何利用vue3實(shí)現(xiàn)一個(gè)無縫滾動(dòng)組件吧2023-09-09
vue2.0的contextmenu右鍵彈出菜單的實(shí)例代碼
本篇文章主要介紹了vue2.0的contextmenu右鍵彈出菜單的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Vue 項(xiàng)目部署到服務(wù)器的問題解決方法
本篇文章主要介紹了Vue 項(xiàng)目部署到服務(wù)器的問題解決方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12

