VUE使用代理实现前后端代码联调

       现在很多公司都比较流行前后端开发分离（注意：是开发的分离(包括代码和开发人员)，而不是简单的前后端代码分离），比如前端开发是一波人，后端开发是另一波人。这样可以更好体现术业有专攻以及提升整体项目的效率。使用常规的HTML/JS/CSS等开发还好办，大家可以在同一个环境里协同开发。但去到用VUE做前端开发的环境里，这种常规的协同方式显然是行不通的，因为VUE的代码是不能直接使用到项目上，要通过编译输出成HTML/JS/CSS才能部署到开发环境的。这样就会引发另一个问题，VUE的开发环境与后端的开发环境不在同一个上，比如前端用的是VSCODE开发VUE，而后台可能使用的是eclipse，这两者是怎么顺利通过联合测试，然后发布到生产环境的呢？

        这个实际要分两种情况，一种是前后端代码最终是整合在一个系统部署在一起的，另一种情况是前端部署在一个应用服务器，后台部署在另一个应用服务器。无论哪种情况都是要经过联调才能真正发布上去。因为我这里是部署在一起的，所以只讨论这种情况的联调。如果两波人做前后端怎么调试呢？一种最简单的方法就是双方启动服务，前端开发人员把后台开发人员的IP端口及resful或servlet路径写在代码上，调试通过后，再把这部分代码替换成生产环境然后再构建出源码。这种应该是最土的方法了。还有一种是使用axios的代理，使用axios的配置实现跨域和联调，最重要的是调试完成后直接build出来的代码就可以放到生产环境中不用再去修改这个后端的IP端口。下面看下是怎么实现的，有更好的方法，欢迎大家留言。

      首先在main.js中引入axios 组件，然后重写axios的baseURL

这句意思是判断是否为开发环境，如果是开发环境就用/api否则就是空

关键几句已经标注如下：

其中process.env.NODE_ENV和process.env.BASE_API是在dev.env.js里面定义，这个JS是定义一些开发环境的变量。代码如下：

做完以上两文件的代码编写后，我们在config目录下的index.js中配置axios代理，其中target就是代理要跳转到的后台服务，pathRewrite路径重写，意思是以/开头的请求路径均会跳转到代理服务。

配置完上面几个关键配置文件后，我们就可以使用了，用法如下，

我们运行下VUE，看下页面请求，可以清楚看到已经代理请求到后台服务。

然后我们build出来把源码文件直接放到服务器中不用做任务修改，在实际生产环境中请求效果如下：

可以看到，生产环境是没用到代理的，也就是VUE中开发环境与生产环境的配置是互不影响的，前端开发人员与后端开发人员联调没问题后可以直接构建部署到生产环境。

至此，VUE使用代理实现前后端代码联调已介绍完毕，可能有其他更好的方法，欢迎大家留言探讨。