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