1.背景1.1。现状前端工程师在开发项目时，通常会在webpack.config.js或vue.config.js中配置代理转发，以解决本地调用后端接口存在的跨域问题。如下：devServer:{proxy:{'/':{target:'http://www.dev.com',//开发环境//target:'http://www.dev1.com',//Terminal1之后//target:'http://www.dev2.com',//backend2ws:false,changeOrigin:true}}}1.2、痛点这个配置确实省心了，可以很方便调用后台接口，但是可以回想一下自己在使用过程中是否遇到过以下问题：每次切换环境都需要修改配置重启项目，非常耗时，尤其是一些大型项目。重启需要等待1分钟甚至更长时间；b.当多人开发同一个项目时，他们可能会使用不同的环境。修改后的配置文件与代码一起提交后，会引起后续冲突；C。切换环境是通过注释掉无用的环境来完成的。放开代理环境效率很低；d.调用某些环境的接口，需要携带特定的header字段，才能有调用的权限，比如Authorization；以上的问题想必大家或多或少都遇到过，那又如何呢？我们如何优化这个过程并提高我们的效率？下面要介绍的一款自研工具可以解决上述问题。二、工具介绍2.1．简介该工具采用electron+vue开发，具有以下功能：添加、编辑、删除、启动、暂停代理任务等；b.每个代理任务可配置多个代理环境，支持一键切换；c、导入导出配置文件。2.2.使用注意事项工具服务的起始端口为12345，使用前请确保没有其他程序占用该端口；b.由于5000之前的端口容易被其他程序占用，添加和编辑代理任务时，请将端口控制在5001-65535之间【工具中会有提示】。三、工具使用3.1．新任务注意：右侧配置项中的headers字段【可以自己添加，比如上面提到的Authorization】会混入源请求的header字段中，随着接口地址的转发，从而可以据此识别目标地址。3.2.编辑任务[跳过]3.3。删除任务[跳过]3.4。启动任务3.5。proxy3.6后查看效果。切换代理环境【切换到"OK123"】，查看效果3.7，在vue.config中。在js中使用devServer:{proxy:{'/':{target:'http://localhost:5555',//只配置一个环境，在hello-proxy工具中切换环境ws:false,changeOrigin:true}从上面我们可以看出，使用这个工具后，我们只需要在vue.config.js或者webpack.config.js中配置一个地址，切换环境就可以在工具中操作了。4.管理配置文件上面提到的痛点之一是多人协作造成的。实际上，当涉及到多人协作时，还有一个问题。同一个项目在A配置，需要开发B的时候难免。地块需要一次配置，所以本工具也提供了相关配置的导出功能。实际使用中，可以在svn或者git中创建一个目录来维护配置。添加新开发时，可以直接拉取修改配置，然后导入到工具中，非常方便。4.1.导出备注：本工具的配置数据是通过json文件保存的，区分任务列表数据和环境列表数据，所以需要导出两次。4.2.导入将之前导出的任务和环境文件对应导入即可，如图：备注：文件名需要一一对应，否则工具无法正常使用。5、下载【安装程序】https://pan.baidu.com/s/1XwZG...6、关注“前端大会”，附上实际使用截图，获取更多内容...
