文章图片
1、背景
1.1、现状
前端工程师在开发项目的时候，通常会在webpack.config.js或者vue.config.js中配置代理转发，以便解决本地调用后端接口时存在的跨域问题。如下：
devServer: {
proxy: {
'/': {
target: 'http://www.dev.com', // 开发环境
//target: 'http://www.dev1.com', // 后端1
//target: 'http://www.dev2.com', // 后端2
ws: false,
changeOrigin: true
}
}
}1.2、痛点 这个配置确实让我们省心不少，可以非常方便的调用后端接口，不过大家可以回忆一下，在使用过程中是否碰到如下问题：
- a、每次切换环境的时候需要修改配置，重启项目，非常耗时，特别是一些体积庞大的项目，每次重启需要等待1分钟甚至更长；
- b、多人开发同一项目的时候有可能使用不同的环境，修改后的配置文件随代码一起提交后造成后续的冲突；
- c、切换环境是通过注释无用环境，放开代理环境进行的，非常低效；
- d、调用某些环境的接口需要携带特定的头字段才有权限调用，比如说Authorization；
2、工具介绍 2.1、简介 该工具使用electron+vue开发，具有如下功能：
- a、新增、编辑、删除、启动、暂停代理任务等；
- b、每个代理任务可配置多个代理环境，支持一键切换；
- c、导入、导出配置文件。
- a、该工具服务启动端口为12345，使用前请保证没有其他程序占用该端口；
- b、由于5000以前的端口容易被其他程序占用，所以添加和编辑代理任务时，端口请控制在5001-65535之间【工具内会有提示】。
文章图片
文章图片
3.2、编辑任务【略过】 3.3、删除任务【略过】 3.4、启动任务
文章图片
文章图片
3.5、查看代理后的效果
文章图片
3.6、切换代理环境【切换到“好123”】，查看效果
文章图片
文章图片
文章图片
3.7、在vue.config.js中使用
devServer: {
proxy: {
'/': {
target: 'http://localhost:5555', // 只配置一个环境即可，在hello-proxy工具中切换环境
ws: false,
changeOrigin: true
}
}
}从上面可以看出使用该工具后，我们只需在vue.config.js或者webpack.config.js中配置一个地址，切换环境在工具中操作即可。
4、管理配置文件 【【HelloProxy】- 前端代理工具】上面有提到痛点中有一个是多人协作的时候产生的，其实多人协作的时候还有个问题，就是相同的项目在A那里配置了，B要开发的时候不可避免地也要配置一次，所以本工具也提供了相关配置的导出功能。实际使用的时候可以在svn或者git中起一个目录专门维护该配置，后续新增开发的时候直接拉取改配置，然后导入到工具中就可以了，非常方便。
4.1、导出
文章图片
文章图片
备注：本工具的配置数据是通过json文件保存的，并且区分了任务列表数据和环境列表数据，所以需要导出两次。
4.2、导入 将之前导出的任务和环境文件对应导入即可，如图：
文章图片
文章图片
备注：文件名称需要一一对应，否则工具不能正常工作。
5、下载 [安装程序]
https://pan.baidu.com/s/1XwZG...6、实际使用截图
文章图片
关注“前端大会”，获取更多内容……
