前后端快速联调之切换请求地址(一)

415

产品即将上线前期,难免会遇到与多个后端同事进行本地调试定位问题或切换dev、test分支修复bug,一般我们是切换webpack配置项 proxy>target中代理地址,然后静静的看着npm run dev启动,是不是很痛苦? 作为一个什么都想干的全干工程师,今天就聊一聊自认为江湖上失传已久的武林秘籍之独孤九剑。

14855646-535f47e054974d77.webp

第一步、netsh

前提需要了解一下,Windows自带的端口转发 netsh interface portproxy
首先打开命令打开CMD工具,尝试搞一搞

# 新增端口转发
netsh interface portproxy add v4tov4 listenport=6000  connectaddress=后端iP connectport= 后端端口
# 查看转发了哪些端口
netsh interface portproxy show  v4tov4
#删除代理端口
netsh interface portproxy delete v4tov4 listenport=6000  

第二步、child_proces

这些东西还需要来回在命令行粘贴,是不是感觉不智能?接下来有请我们万能的node.js登场。
node.js官网

image.png

// 通过js脚本是不是我们可以执行上面命令并获取执行后内容
require('child_process').exec
// text我们在终端需要执行命令
exec(text, options, function (error, stdout, stderr) {console.log(stdout)})

**

第三步、npm script

package.json配置

package.json文件,将文件起名ip.js放到build 目录下面。 Github代码地址
 "scripts": {
    "dev": "npm run ip && vue-cli-service serve",    // 可以查一下shell中的?
    "ip": "node build/ip.js",												// node 执行ip.js脚本
    "build": "vue-cli-service build",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "new": "plop"
  },

获取npm script 中参数

let name = process.argv[2]    // 我们可以获取npm run ip 后面传递参数
/* 默认环境接口 */
let IPhost = '10.1.1.1:8888'.split(':')
# 假如和张三联调
npm run ip san
# 假如和李四联调
npm run ip si

image.png

扫描他,带走我