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è)參考，也希望大家多多支持腳本之家。