文章轉自原創部落格   

http://www.xdx97.com/#/single?bid=c4fadbb8-93e3-3129-10eb-a7216f4a99b4

目的：使用vue讀取本地的靜態檔案。

方法一：require

 格式：

var json = require('檔案的相對地址');

優點：可以按照你寫的順序去執行，沒有任何書寫方面的侷限。

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

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

方法二：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。