vue引用public目錄下文件的方式詳解
有時候我們在開發h5時候,會有需要綁卡授權操作,這個時候需要同意某些協議並且這些協議是可以點擊打開的,這種該怎麼做呢?
其實這就是一個鏈接,前端能夠打開鏈接並且常用的也就是a標簽喝vue自帶的router-link,當然其他還有,通常來說a標簽就夠瞭
關於協議的存儲,這裡簡單說下,在實際開發中,協議存儲有以下幾種:
1、存放在前端,一種是直接放在public靜態資源文件夾下,webpack打包不會對其處理,直接把文件復制到存放項目的工程目錄下;還有一種就是托管在cdn上,類似靜態資源托管,會有一個域名,這個域名下放的都是靜態資源比如圖片呀之類的。通常來說,第一種最簡單。
2、存放在一個中臺,這個中臺不是系統不是一個項目,而是公司內一個組織劃分,支撐著其他部門的項目,通常就是前端編寫協議內容,然後把協議存放的絕對路徑給到中臺相應開發,他們會做些處理最後返回一個完整的帶有域名的文件地址,比如http:xxxx/zyxj/1.html,然後把帶有詳細信息返回給前端,前端直接渲染。
以上倆種方法我都參與過,今天說第一種。
第一種就是把靜態資源放在public裡面,vue頁面地址的話填寫絕對路徑,就是不需要帶有public前綴,因為實際上線的話,webpack是吧public下面很多文件復制到根目錄/或者某個項目目錄下,比如/index.html,1.css,1.html或者myapp/index.html,1.css,1.html。
頁面使用的話如截圖:
⚠️註意⚠️ 上面說的情況生產部署到根目錄下頁面上使用的方法,但是我們怎麼知道項目是不是部署到根目錄呢?
1、配置文件查看項目部署位置:
如果你的項目不是部署在跟目錄,但是也不知道具體部署到哪個目錄,不用擔心,隻要在config文件做個判斷如果是生產環境部署到哪裡,如下:
const BASE_URL=process.env.NODE_ENV==='production'?'Utility':'/' publicPath:BASE_URL data(){ return { publicPath:process.env.BASE_URL } }
總結
到此這篇關於vue引用public目錄下文件的文章就介紹到這瞭,更多相關vue引用public文件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue項目中對index.html中BASE_URL的配置方式
- Vue項目打包部署的實戰過程記錄
- vue-router如何實現history模式配置
- Vue CLI中模式與環境變量的深入詳解
- Vue前端vue.config.js簡介