Mock

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发更加独立自主，不会被服务端的开发所阻塞。

Swagger

在公司的项目中通常使用 swagger (opens new window)， 由后端来模拟业务数据。 swagger 是一个 REST APIs 文档生成工具，它从代码注释中自动生成文档，可以跨平台，开源，支持大部分语言，社区好，总之非常不错，强烈推荐。 线上 demo (opens new window)

Mockjs

mockjs (opens new window) 的原理是: 拦截了所有的请求并代理到本地，然后进行数据模拟，所以你会发现 network 中没有发出任何的请求。

但它的最大的问题是就是它的实现机制。它会重写浏览器的XMLHttpRequest对象，从而才能拦截所有请求，代理到本地。大部分情况下用起来还是蛮方便的，但就因为它重写了XMLHttpRequest对象，所以比如progress方法，或者一些底层依赖XMLHttpRequest的库都会和它发生不兼容。

它还有一个问题是，因为是它本地模拟的数据，实际上不会走任何网络请求。所以本地只能通过console.log来调试。

目前方案

在本地会启动一个mock-server来模拟数据，该方案的好处是，在保留 mockjs的优势的同时，解决之前的痛点。由于我们的 mock 是完全基于webpack-dev-serve来实现的，所以在你启动前端服务的同时，mock-server就会自动启动，而且这里还通过 chokidar (opens new window) 来观察 mock 文件夹内容的变化。在发生变化时会清除之前注册的mock-api接口，重新动态挂载新的接口，从而支持热更新。由于是一个真正的server，所以你可以通过控制台中的network，清楚的知道接口返回的数据结构。并且同时解决了之前mockjs会重写 XMLHttpRequest对象，导致很多第三方库失效的问题。

通过阅读源码可以发现所有的请求都设置了一个 BASE_URL，而这个 BASE_URL 又是通过读取 process.env.VUE_APP_API_BASE_URL 这个环境变量来动态设置的，这样方便我们做到不同环境使用不同的 api 地址。

移除

如果你不想使用mock-server的话只需要修改.env.development将process.env.VUE_APP_API_BASE_URL指向对应服务器的地址并以dev命令启动项目就可以了。

新增

如果你想添加 mock 数据，需要先在packages/pan-spatial-map-mock-server/mock/swagger.yml中定义接口，然后在packages/pan-spatial-map-mock-server/mock/app/某个文件内实现该接口，最后在packages/pan-spatial-map-mock-server/mock/api.ts中引入该文件即可。