vue-resource 获取本地json数据404
在使用vue-cli搭建的vue项目中，使用vue-resource请求本地的json格式数据，来模仿服务端返回数据流程，但是请求不到json数据，返回404。
在网上查询了大量资料，大都是以前的版本，在build的dev-server.js中进行修改。但是最新的版本已经废除了dev-sever.js文件。
VUE开发请求本地数据的配置，早期的vue-cli下面有dev-server.js和dev-client.js两文件，请求本地数据在dev-server.js里配置，最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替，所以 配置本地访问在webpack.dev.conf.js里配置。
但是以上步骤非常麻烦且有很多坑。
解决vue-resource使用本地json模拟服务端数据请求问题： vue-resource 的安装：
cnpm install vue-resource --save
在main.js中导入并使用
import vueResource from 'vue-resource'; Vue.use(vueResource);
模拟后台数据的json文件必须放在static目录下，其他目录不能访问
读取数据
调用成功之后返回数据
什么是vue-resource？
vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应，也就是说，jQuery中ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。
此外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。
vue-resource是不是已经不那么陌生了，接下来我们就来看看vue-resouce的具体使用方法：
// 因为vue-resource依赖于vue.js，所以要先引入vue.js <script src="js/vue.js"></script> <script src="js/vue-resource.js"></script>
引入插件以后，我们再来看看它怎么使用：
// 全局引用 Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 基于某个Vue实例使用 var vm = new Vue(); vm.$http.get('/someUrl', [options]).then(successCallback, errorCallback); vm.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);可以看到，在发出请求以后，会有一个then对callback进行处理，看到then我们就会想到ES6里面的promise函数，这里确实是在promise的基础上进行封装的。为了方便，我们可以在回调函数中使用箭
头函数，示例如下：
Vue.http.get('/someUrl', [options]).then((response) => {
// 成功回调函数
}).catch((error) => {
// 错误回调函数，会在整个请求过程中监听错误
})vue-resource总共提供了7种请求API，如下所示：
get(url, [options])head(url, [options])delete(url, [options])jsonp(url, [options])post(url, [body], [options])put(url, [body], [options])patch(url, [body], [options])
值得注意的是API中的options属性，发送请求时的options选项对象包含以下属性：
| 参数 | 类型 | 描述 |
|---|---|---|
| url | string | 请求的URL |
| method | string | 请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法 |
| body | Object, FormData string | request body |
| params | Object | 请求的URL参数对象 |
| headers | Object | request header |
| timeout | number | 单位为毫秒的请求超时时间 (0 表示无超时时间) |
| before | function(request) | 请求发送前的处理函数，类似于jQuery的beforeSend函数 |
| progress | function(event) | ProgressEvent回调处理函数 |
| credentials | boolean | 表示跨域请求时是否需要使用凭证 |
| emulateHTTP | boolean | 发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override |
| emulateJSON | boolean | 将request body以application/x-www-form-urlencoded content type发送（表单形式发送） |
response对象包含以下属性：
| 方法 | 类型 | 描述 |
|---|---|---|
| text() | string | 以string形式返回response body |
| json() | Object | 以JSON对象形式返回response body |
| blob() | Blob | 以二进制形式返回response body |
| 属性 | 类型 | 描述 |
| ok | boolean | 响应的HTTP状态码在200~299之间时，该属性为true |
| status | number | 响应的HTTP状态码 |
| statusText | string | 响应的状态文本 |
| headers | Object | 响应头 |
以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。