1

hello_proxy@2x.png

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、导入、导出配置文件。

2.2、使用注意

  • a、该工具服务启动端口为12345,使用前请保证没有其他程序占用该端口;
  • b、由于5000以前的端口容易被其他程序占用,所以添加和编辑代理任务时,端口请控制在5001-65535之间【工具内会有提示】。

3、工具使用

3.1、新增任务

注意:右侧配置项中的headers字段【可自行添加,如上面提到的Authorization】会混入到源请求的头字段中,随着接口的转发一起传给目标地址,以便目标地址能够进行相应的身份鉴别。

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、管理配置文件

上面有提到痛点中有一个是多人协作的时候产生的,其实多人协作的时候还有个问题,就是相同的项目在A那里配置了,B要开发的时候不可避免地也要配置一次,所以本工具也提供了相关配置的导出功能。实际使用的时候可以在svn或者git中起一个目录专门维护该配置,后续新增开发的时候直接拉取改配置,然后导入到工具中就可以了,非常方便。

4.1、导出

备注:本工具的配置数据是通过json文件保存的,并且区分了任务列表数据和环境列表数据,所以需要导出两次。

4.2、导入

将之前导出的任务和环境文件对应导入即可,如图:

备注:文件名称需要一一对应,否则工具不能正常工作。

5、下载 [安装程序]

https://pan.baidu.com/s/1XwZG...

6、实际使用截图

关注“前端大会”,获取更多内容……

用户bPRKRK
29 声望1 粉丝