调料包: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"
]
],