vue?如何引入本地某個(gè)文件?require
vue 引入本地某個(gè)文件 require
vue 使用require引入某個(gè)文件,判斷本地是否有某個(gè)文件
在本地電腦有host.json文件,在項(xiàng)目中引入這個(gè)文件
1.使用require.context判斷某個(gè)文件是否存在
require.context(引入某個(gè)文件的路徑, 是否遍歷該路徑下的所有子目錄,正則匹配后綴名稱)
let obj = require.context( "/Users/Administrator/test-demo", false, /\host\.json$/ ); // 檢索符合是 host.json 后綴的所有文件 let host = obj.keys().filter(it => it === "./host.json"); // 過(guò)濾host.json完全匹配文件 if (host && host.length) { let hostname = require("/Users/Administrator/test-demo/host.json"); console.log(hostname); }
obj.keys()返回所有符合后綴是 host.json 的文件名數(shù)組,并每個(gè)項(xiàng)都是以路徑的形式顯示,所以在文件的前面有./
obj.keys() = ["./1host.json", "./host.json"]
我需要的是完全匹配 host.json 文件,所以使用數(shù)組過(guò)濾函數(shù)filter過(guò)濾host.json文件,如果存在文件則使用require去讀取文件內(nèi)的數(shù)據(jù)
如果檢索不到host.json后綴的文件,obj.keys()返回一個(gè)空數(shù)組
2.使用 try……catch……
try { let hostname = require("/Users/Administrator/test-demo/host.json"); console.log(hostname); } catch (error) { console.log(1111); }
如果檢索不到host.json后綴的文件,進(jìn)入catch內(nèi),如果有安裝eslint,會(huì)有警告信息,對(duì)強(qiáng)迫癥者不友好。如果不介意,肯定是這個(gè)方法好,代碼少
vue 引入本地文件無(wú)效
無(wú)效的原因是,在webpack打包的設(shè)置(/config/index.js)中,指定將靜態(tài)資源打包到static文件夾下,從而導(dǎo)致路徑錯(cuò)誤。
解決方法
將靜態(tài)資源放在static文件夾下再引入
– 打包之前
– 打包之后
或者在引入時(shí)默認(rèn)靜態(tài)資源在static文件夾下
我在根目錄下建立了css文件夾用來(lái)裝樣式文件
但是在引入的時(shí)候,我認(rèn)為他已經(jīng)在static文件夾下了(因?yàn)檫\(yùn)行時(shí)它會(huì)被安排在那里)
你看,它還在提示,找不到bootstrap.css,因?yàn)樗F(xiàn)在確實(shí)不在static下,但是當(dāng)運(yùn)行時(shí)(打包后不行,因?yàn)閣ebpack會(huì)重新組織文件,導(dǎo)致引入失敗),它會(huì)出現(xiàn)在那里(怎么證明:1.樣式生效了 2. 訪問(wèn)http://localhost:8080/static/css/bootstrap.css得到了正確的樣式)。
– 打包后,文件被重新組織,已經(jīng)看不到bootstrap.css了
當(dāng)然是推薦使用第一種啦,直接將靜態(tài)文件放在static下,舉第二個(gè)例子是為了更清楚的理解位置變化
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3?vite異步組件及路由懶加載實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了vue3?vite異步組件及路由懶加載實(shí)戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁(yè)面
這篇文章主要介紹了vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)1
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料,允許采用簡(jiǎn)潔的模板語(yǔ)法聲明式的將數(shù)據(jù)渲染進(jìn)DOM,且數(shù)據(jù)與DOM綁定在一起,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01Vue簡(jiǎn)化用戶查詢/添加功能的實(shí)現(xiàn)
本文主要介紹了Vue簡(jiǎn)化用戶查詢/添加功能的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)
這篇文章主要介紹了Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09mpvue項(xiàng)目中使用第三方UI組件庫(kù)的方法
這篇文章主要介紹了mpvue項(xiàng)目中使用第三方UI組件庫(kù)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue源碼學(xué)習(xí)之Object.defineProperty對(duì)象屬性監(jiān)聽(tīng)
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty對(duì)象屬性監(jiān)聽(tīng),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05簡(jiǎn)易Vue評(píng)論框架的實(shí)現(xiàn)(父組件的實(shí)現(xiàn))
本篇文章主要介紹了簡(jiǎn)易 Vue 評(píng)論框架的實(shí)現(xiàn)(父組件的實(shí)現(xiàn)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01