Vue請求本地JSON文件的方法

使用cli2.0生成的項目，靜態文件是static文件。

使用cli3.0生成的項目，靜態文件變成了public文件。

把json文件放到靜態文件里面，使用的時候vue會默認請求到靜態文件里面。 

 

方式一：

安裝 axios

npm install axios

在main.js文件中添加：

import axios from 'axios'
Vue.prototype.$http = axios

讀取數據： 

  this.$https.get('data.json').then((response) => {
        // 200響應
        console.log(response) // 此處的response對象包含了json的文件信息和數據，看控制台點出來即可
    }, (err) => {
        // 500響應
        console.log(err)
    })

 

方式二：

安裝 vue-resource

import VueResource from 'vue-resource'

在main.js文件中添加：

import VueResource from 'vue-resource'
Vue.use(VueResource)

 

讀取數據：

 this.$http.get('static/map/china.json').then(response => {
        console.log(response)//此處的response對象包含了json的文件信息和數據，看控制台點出來即可
    })