简化前端开发多套接口环境切换步骤
通过环境变量控制代理地址切换
-
安装
npm install switch-proxy-target -g -
初始化配置工具
用户目录下配置
❯ switch-proxy-target init
init setting /path/to/cwd/.sptrc.json
- 配置工具参数,编辑
/path/to/cwd/.sptrc.json:
$schema该属性配置可以给开发工具提供json配置提示
{
"targets": [
{
"name":"代理目标地址1",
"hostname":"target1.example.org"
}
],
"syncHosts": [
"选择目标需要同步的hosts域名,如：example.org"
]
}- 修改项目
proxy.conf.js配置中target:
{
// ...
target: `https://${process.env.PROXY_TARGET||'192.168.1.1'}`
//...
}- 增加
package.json的scripts（可选配置）
{
"scripts":{
//...
"start": "ng serve",
"start:switch": "switch-proxy-target run \"npm start\""
//...
}
}-
switch-proxy-target run "npm start"或npm run start:switch（需要环境配置5）
❯ npm run start:switch
> example@5.1.0 start:switch /project/example/
> switch-proxy-target run "npm start"
? Please select the proxy target: 3环境:example.org
----------Start detecting target accessability and fetch ip------------
正在 Ping example.org [192.168.1.1] 具有 32 字节的数据:
来自 192.168.1.1 的回复: 字节=32 时间=72ms TTL=62
192.168.1.1 的 Ping 统计信息:
数据包: 已发送 = 1，已接收 = 1，丢失 = 0 (0% 丢失)，
往返行程的估计时间(以毫秒为单位):
最短 = 72ms，最长 = 72ms，平均 = 72ms
ok !
----------Start setting proxy target------------
Create an environment variable "PROXY_TARGET=192.168.1.1"!
> example@5.1.0 start:switch /project/example/
> ng serve
...switch-proxy-target hosts
❯ switch-proxy-target hosts
? Please select the proxy target: 3环境:example.org
----------Start detecting target accessability and fetch ip------------
正在 Ping example.org [192.168.1.1] 具有 32 字节的数据:
来自 192.168.1.1 的回复: 字节=32 时间=72ms TTL=62
192.168.1.1 的 Ping 统计信息:
数据包: 已发送 = 1，已接收 = 1，丢失 = 0 (0% 丢失)，
往返行程的估计时间(以毫秒为单位):
最短 = 72ms，最长 = 72ms，平均 = 72ms
ok !
sync hosts file example.org ok!
npm run start:switch -- --syncEtcHosts
❯ npm run start:switch -- --syncEtcHosts
> example@5.1.0 start:switch /project/example/
> switch-proxy-target run "npm start" --syncEtcHosts
? Please select the proxy target: 3环境:example.org
----------Start detecting target accessability and fetch ip------------
正在 Ping example.org [192.168.1.1] 具有 32 字节的数据:
来自 192.168.1.1 的回复: 字节=32 时间=72ms TTL=62
192.168.1.1 的 Ping 统计信息:
数据包: 已发送 = 1，已接收 = 1，丢失 = 0 (0% 丢失)，
往返行程的估计时间(以毫秒为单位):
最短 = 72ms，最长 = 72ms，平均 = 72ms
ok !
----------Start setting proxy target------------
Create an environment variable "PROXY_TARGET=192.168.1.1"!
> example@5.1.0 start:switch /project/example/
> ng serve
...