腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)

更新時(shí)間：2022年09月05日 15:59:46 作者：IT博客技術(shù)分享

這篇文章主要介紹了Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue讀取本地靜態(tài)文件json

方法一：require

格式：

var json = require('文件的相對(duì)地址');

優(yōu)點(diǎn)：可以按照你寫的順序去執(zhí)行，沒(méi)有任何書寫方面的局限。

缺點(diǎn)：當(dāng)你打包的時(shí)候，它很可能被打包到 js 中去，出現(xiàn)這種情況基本就涼涼了。你的 js 超級(jí)大。網(wǎng)站基本無(wú)法訪問(wèn)。

解決：你的 js ，很大但是你可以把它c(diǎn)dn加速。這樣雖然很方便，但是你的流量就會(huì)消耗的很快?！惧X多無(wú)視流量】

方法二：ajax

格式：

this.$ajax.get('http://localhost:80/static/map/province/anhui' +'.json')
.then( response => {
this.json = response.data;
})

說(shuō)明：

1、上面的ajax的請(qǐng)求地址，是你的服務(wù)器地址。簡(jiǎn)單來(lái)說(shuō)，你復(fù)制這個(gè)地址去瀏覽器可以訪問(wèn)到你的json數(shù)據(jù)。

2、上面的 ajax 是 axios。我只是給它重新取了個(gè)名字

3、缺點(diǎn)是，你無(wú)法控制ajax什么時(shí)候去調(diào)用的。很可能當(dāng)你需要數(shù)據(jù)的時(shí)候，即使你把上面請(qǐng)求的代碼，放在最前面都可能不行。

4、解決辦法。如果你請(qǐng)求的數(shù)據(jù)只有一次一個(gè)。那么你只需要把你的渲染代碼。放在ajax的回調(diào)函數(shù)里面就好了。

5、如果你是多次請(qǐng)求，你可以考慮一下ajax的嵌套。所有的渲染頁(yè)面，都放在ajax里面，一定確保要渲染的時(shí)候已經(jīng)獲取到了數(shù)據(jù)。

總結(jié)： 雖然，require 來(lái)獲取數(shù)據(jù)很簡(jiǎn)單，很容易被接受。但是js太大，這一個(gè)缺點(diǎn)就抹殺了它。推薦使用ajax。

創(chuàng)建項(xiàng)目后 vue -V 查看腳手架版本，一般看文件目錄就能看了

為什么會(huì)要先查看腳手架版本就是之后會(huì)出現(xiàn)的問(wèn)題有關(guān)

vue-cli2.0將本地json數(shù)據(jù)放到目錄static目錄下

然后用請(qǐng)求就行了

這是vue cli2.0處理之前我也是找了很久有說(shuō)放public目錄下訪問(wèn)的有說(shuō)放static目錄下訪問(wèn)的，都是報(bào)404錯(cuò)誤，主要是腳手架版本沒(méi)說(shuō)清楚，我的是vue cli2.0用這方法就能訪問(wèn)了。

vue cli3.0將文件放在public目錄下訪問(wèn)的時(shí)候像這樣：

如果不行可以試試絕對(duì)路徑

在用 axios 時(shí)使用絕對(duì)路徑。如http://localhost:8080/xxx.json。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: