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的文件信息和数据，看控制台点出来即可
    })

Vue请求本地JSON文件的方法

推荐阅读