一 、什么是前后端联调？
之前开发写代码的时候，所有的ajax数据都不是后端返回的真是数据，而是我们自己通过接口mock模拟的假数据，当前端的
代码编写完毕，后端的接口也可以写好之后，我们就需要把mock数据干掉，尝试使用后端提供的数据，进行前后端的一个
调试，这个过程我们就把他称之为前后端的接口联调。
二 、 为什么要联调？
本地的mock数据是前端自己写的，肯定符合前端需求，但是后端接口首先需要测试通不通，还需要测试数据格式对不对，
还有后端有没有填写足够的数据，比如写列表页，前端想分页，如果后端就写了两条测试数据，你咋整？
所以，需要根据后端对接口的调整，不断地来回切换url，这样岂不是还在受后端的影响，还谈什么毛线的前后端分离，
名存实亡嘛
三 、 如何实现前后端接口联调？
首先，我们已经知道，目前的前后端分离的架构应用分为两种情况：
1，前后端完全分离，前后端分别拥有自己的域名和服务器
2，前后端开发分离，但是部署时是一个域名和一台服务器
虽然架构可以采用前后端分离，但是部署有可以就不一样了，这和项目的大小，公司的情况等等都有关系了，一个百八十
人用的消息用，还得两台服务器两个域名，你不觉得浪费吗？
两种不同的部署情况直接导致了前期在设计联调方案的时候就不同了。
如果你们公司的项目在部署时是两台服务器对应的两个域名，恭喜你，这是最nice的方案，也是联调最舒服的方式。
如果是开发是前后端分离，部署时是一个域名和一台服务器。，在项目根目录的static文件夹下新建的mock文件夹，里面写的一些json文件，当我们做联调的时候，这些mock数据就没用了，我们要把mock数据切换成后端提供给我们的真是数据。
把static文件夹下的mock数据删除之后，在运行项目，发现报错了，浏览器告诉你访问的mock下马的index.json我呢间找不到404.
是因为，我们平时在本地前端开发环境dev地址大多是localhost：8080，而后台服务器的访问地址就是很多情况了，比如
后端程序员本地ip127,0.0.1:8889，或者外网域名，当前端与后台进行数据交互时，自然就出现跨域问题（后台服务没做处理的情况下）。axios不支持jsonp，所以我们就要使用http-proxy-middleware中间件做代理。
现在通过在前端修改vue-cli的配置可解决：vue-cli中的config/index.js下配置dev选项的（proxyTable）:
proxyTable: {
'/api'
: {
target:
'127.0.0.1:8889'
,
// 真实请求的地址
changeOrigin:
true
,
// 是否跨域
}
}
如果你想在公司的vue项目中实现前后端联调，不需要再使用类似于fiddler Charles 的抓包代理工具了，你只需要使用proxyTable这个配置项，把你需要请求的后端服务器地址写在target值里就OK了。
解决完跨域问题后，接下来想想怎么在一台服务器一个域名进行联调的问题了。比较常见的做法是前端在本地修改，本地查看，测试好了以后上传到服务器，看看线上环境可不可以，OK的话一切都好；不行就在本地接着改，然后再上传。
联调完后，如何将前端打包的项目发给后端，这里需要注意两点：
1，css、js 和图片等静态文件
这时候的静态文件在开发阶段不需要任何考虑，按照你喜欢的相对路径或者相对于项目的根路径的形式写就行了，因为早晚要交给后端。但是，需要注意：
如果你采用相对项目根路径的书写方式来写静态文件路径，一定要先和后端商量好，将来项目部署的时候他会把你的前端整个项目放在哪里？如果不是根目录下，你就挂了。比如，你的reset.css的路径是/exports/styles/common/reset.css，后端把你前段项目放在了根目录下的frontEnd文件夹下，reset.css文件就报404 了。
如果后端采用的Java，你需要特别注意的是，Tomcat的根目录并不是webapps文件，而后端项目默认是部署在webapps/root文件下的，所以你如果使用了相对项目根路径的书写方式来写你的静态文件路径时，对不起又是404了。
2. ajax后端数据
因为现在唯一的一台服务器还是在后端程序员那里，所以此时你还是可以写绝对路径（域名+请求路径），利用hosts文件来改变域名映射实现联调。
此文参考闰土大叔的vue菜鸟从业记：https://www.cnblogs.com/running-runtu/p/9267319.html