使用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"
  ]
],