前言：用vue-cli3/4构建的项目，正常应该怎么联调？接手一个新项目，发现里面的联调方式不常规。
1、常规打法：
概要：因为浏览器跨域问题，vue-cli3/4通过中间服务器转发，实现跨域。跨域是浏览器禁止的，服务端并不禁止跨域
所以浏览器发给自己的服务端，然后由自己的服务端再转发给要跨域的服务端，做一层代理
vue-cli的proxyTable用的是http-proxy-middleware中间件。
一般在vue.config.js文件里配置devServe.proxy对象，target的值设为后端的ip的地址，当然你们需要处在同一个内网中（比如公司内网，起码在同一个路由器下。为啥？），然后监听你请求url的组件标识（根目录，也就是一个项目中每一次发请求时都会有的一串字符。url组成：协议：//域名：端口/虚拟目录/文件名？参数&参数）url组成如下图：
这里需要在设置的时项目中的公用目录：
这样设置好了，一般就可以联调了。可以让后端在接口处打个断点，看看能不能走到断点处。或者后端看看ide里打印的logs确认是否连上。
2、非常规打法
概要：主要思路就是不走代理，直接全路由请求后端（或者服务端），跨域问题通过修改浏览器配置解决
在配置请求接口的文件，@/api/index.js文件里，定义baseUrl，这个baseUrl在联调阶段时后端的ip，在发布阶段是通过let baseUrl = window.location.protocol + '//' + window.location.host
拼接全路径的。如图：
这样配置之后，一般的浏览器会报跨域问题，下面说一下如何配置chrome浏览器，让他可以跨域。
- 在电脑上新建一个目录，例如：C:\MyChromeDevUserData
- 右键点击 Chrome 快捷方式图标，选择“属性”
- 在属性页面中的目标输入框尾部加上：
--disable-web-security --user-data-dir=C:\MyChromeDevUserData - 点击“应用”并关闭属性页面。重新打开 chrome 浏览器。如果浏览器出现提示“ --disable-web-security”，那么说明配置成功
可以尝试一下。
