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配置，我总是忘了重新启动项目，看到配置未生效总以为自己配置错了，所以在这里提醒小伙伴们配置完成后记得重新启动项目。