About
在Web开发项目中，后端接口的产出速度往往比前端网页开发速度慢，我们一般会要求后端先出具接口文档，根据返回的数据字段去定义变量，但是以前我经常遇到前端页面基本开发完毕，但是后端的接口还没写完，这样的话等到后端接口写完，我们来调试接口还得需要时间。
这时我们可以使用mock数据来模拟服务端数据进行本地开发或者调试。
使用mock数据进行本地开发的步骤
一、生成mock数据
我们可以根据接口文档手动或者通过脚本生成我们需要的mock数据（JSON文件），然后将JSON文件放到项目的static/mock下，因为，只有如果放在其他文件下下，如果我们通过url去访问会被浏览器自动重定向，如图所示：
访问失败.gif
可以看到我们通过
/assets/image/delete.png去访问这个图片会被浏览器重定向，那我们通过/static去访问会怎样呢，如图所示：
访问成功.gif
可以看到我们通过
/static/mock/index.json 去访问是可以拿到index.json文件的，所以我们把生成的index.json放到该目录下。
二、配置proxy代理
通过第一步，我们已经能够通过axios.get('./static/mock/index.json')去拿到数据了，但是如果我们每一个接口都这么写，那么如果我们拿到了真正的接口，我们还需要来文件中修改这些url，非常的不方便，这时我们可以修改项目初始化webpack产生的/config/index.js文件去配置proxy代理：
proxyTable: {
'/api': {
target: 'http://localhost:8080',
pathRewrite : {
'^/api': 'static/mock' //拿到真正得的接口后，我们把 ```static/mock```换成服务端地址就ok
}
}
}
这样，我们在调用接口时就不用再写本地地址了
getHomeInfo () {
axios.get('/api/index.json').then(this.getInfoSucc)
}
三、重新启动项目
很多时候安装完某些包，或者修改了webpack配置，我总是忘了重新启动项目，看到配置未生效总以为自己配置错了，所以在这里提醒小伙伴们配置完成后记得重新启动项目。
