使用x-switch进行代理

调料包:mac下的ihots && chrome插件xswitch

安装软件

首先在 chrome 的组件中,加入xswitch插件
如果你需要修改本机地址,在 appstore 中下载ihots,用来管理自己的本机地址

如何进行代理
  • 点开xswitch后,会有如下界面,让你进行代理地址的填写

  • 在这里插入图片描述
    你需要两个地址,本机项目入口地址 和 你要代理的环境入口地址

  • 第一个是本地项目 build 后的入口文件地址:

    • 首先你需要开启你的项目,找到对应的本地项目启动地址:localhost:8000
  • 第二是项目的地址

    • 在浏览器中,打开项目,打开 Network 刷新页面
    • 找到入口文件对应的地址,写在 xswitch 中第二行,第二个是测试环境 入口文件【一般是index.js】:
    • 然后打开你要代理的环境页面【这里默认你的代理页面为测试环境】
    • 进入测试环境网页项目主入口,打开 Network 然后刷新页面
    • 从刷新的页面中,找到 index.js 的资源请求

为什么找到这个资源,其实原理很简单,这个文件就是你项目 build 之后的js入口文件
这个文件不一定叫index.js,你在项目中配置成啥就是啥
你只需要在项目中 build 一下,打开build后生成的文件包,看下入口文件叫啥就可以了

  • 找到 index.js 的资源请求后,点开,在 Request URL 中复制地址,写在 xwitch 第一行
  • 再次刷新页面,看到代理的地址 对应码是 307 时,代表代理成功

接下来你就可以愉快的在本地进行开发了~

✅需要代理js入口文件
✅需要代理css文件,不然本地修改了css是不起作用的

"proxy": [
  [
    "https://xxxxxxxx/xxxxx/xxxxxxx/0.0.8/umi.js", //线上地址
    "http://129.0.0.1:8000/umi.js" // 本机地址
  ],[
    "https://xxxxxxx/xxxx/xxxxxx/0.0.10/umi.css",
    "http://localhost:8000/umi.css"
  ]
],
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值