vue引用public目錄下文件的方式詳解
有時候我們在開發(fā)h5時候，會有需要綁卡授權(quán)操作，這個時候需要同意某些協(xié)議并且這些協(xié)議是可以點擊打開的，這種該怎么做呢？
其實這就是一個鏈接，前端能夠打開鏈接并且常用的也就是a標(biāo)簽喝vue自帶的router-link，當(dāng)然其他還有，通常來說a標(biāo)簽就夠了
關(guān)于協(xié)議的存儲，這里簡單說下，在實際開發(fā)中，協(xié)議存儲有以下幾種：
1、存放在前端，一種是直接放在public靜態(tài)資源文件夾下，webpack打包不會對其處理，直接把文件復(fù)制到存放項目的工程目錄下；還有一種就是托管在cdn上，類似靜態(tài)資源托管，會有一個域名，這個域名下放的都是靜態(tài)資源比如圖片呀之類的。通常來說，第一種最簡單。
2、存放在一個中臺，這個中臺不是系統(tǒng)不是一個項目，而是公司內(nèi)一個組織劃分，支撐著其他部門的項目，通常就是前端編寫協(xié)議內(nèi)容，然后把協(xié)議存放的絕對路徑給到中臺相應(yīng)開發(fā)，他們會做些處理最后返回一個完整的帶有域名的文件地址，比如http:xxxx/zyxj/1.html，然后把帶有詳細(xì)信息返回給前端，前端直接渲染。
以上倆種方法我都參與過，今天說第一種。
第一種就是把靜態(tài)資源放在public里面，vue頁面地址的話填寫絕對路徑，就是不需要帶有public前綴，因為實際上線的話，webpack是吧public下面很多文件復(fù)制到根目錄/或者某個項目目錄下，比如/index.html,1.css,1.html或者myapp/index.html,1.css,1.html。
頁面使用的話如截圖：
??注意?? 上面說的情況生產(chǎn)部署到根目錄下頁面上使用的方法，但是我們怎么知道項目是不是部署到根目錄呢？
1、配置文件查看項目部署位置：
如果你的項目不是部署在跟目錄，但是也不知道具體部署到哪個目錄，不用擔(dān)心，只要在config文件做個判斷如果是生產(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue?element?ui用戶展示頁面的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本文給大家收藏整理了關(guān)于vue面試題匯總的一些知識,需要的朋友可以參考下2018-03-03
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等屬性的縮寫,本文我用動態(tài)綁定background-image來舉例,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了在vue項目如何使用base64加密，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問題
這篇文章主要介紹了解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了uni-app 實現(xiàn)小程序登錄注冊功能,文中給大家介紹了實現(xiàn)思路，以及vuex和本地緩存的區(qū)別，需要的朋友可以參考下2019-10-10
element-ui 中使用upload多文件上傳只請求一次接口
這篇文章主要介紹了element-ui 中使用upload多文件上傳只請求一次接口，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
本文主要介紹了vue項目中使用require.context引入組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
el-tab設(shè)置默認(rèn)激活的標(biāo)簽頁實現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于el-tab設(shè)置默認(rèn)激活的標(biāo)簽頁實現(xiàn)步驟,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09