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

使用vue讀取本地的靜態(tài)文件

方法一：require

格式：

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

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

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

解決：你的 js ，很大但是你可以把它cdn加速。這樣雖然很方便，但是你的流量就會消耗的很快?！惧X多無視流量】 

方法二：ajax 

格式：

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

說明：

1、上面的ajax的請求地址，是你的服務器地址。簡單來說，你復制這個地址去瀏覽器可以訪問到你的json數據。

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

3、缺點是，你無法控制ajax什么時候去調用的。很可能當你需要數據的時候，即使你把上面請求的代碼，放在最前面都可能不行。

4、解決辦法。如果你請求的數據只有一次一個。那么你只需要把你的渲染代碼。放在ajax的回調函數里面就好了。

5、如果你是多次請求，你可以考慮一下ajax的嵌套。  所有的渲染頁面，都放在ajax里面，一定確保要渲染的時候已經獲取到了數據。

總結： 雖然，require 來獲取數據很簡單，很容易被接受。但是js太大，這一個缺點就抹殺了它。推薦使用ajax。

Vue cli獲取本地json數據總是404報錯

vue cli版本查看

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

• vue-cli版本是2.0左右的就會有webpack的config目錄
• vue-cli版本是3.0以上的就會有vue.config.js沒有config目錄

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

創(chuàng)建本地json數據

vue-cli2.0將本地json數據放到目錄static目錄下

然后用請求就行了

這是vue cli2.0處理 之前我也是找了很久 有說放public目錄下訪問的 有說放static目錄下訪問的，都是報404錯誤，主要是腳手架版本沒說清楚，我的是vue cli2.0用這方法就能訪問了。

vue cli3.0將文件放在public目錄下 訪問的時候像這樣：

如果不行可以試試絕對路徑

在用 axios 時使用絕對路徑。如http://localhost:8080/xxx.json。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論