如何让 vue-cli 创建的项目启动时在控制台新增可访问服务地址

背景

现在我们公司的项目是用 vue-cli 创建的，包管理器使用的是 npm。因为我们的项目是投放到移动端的，所以会非常频繁的在手机上预览调试查看日志。

在启动项目后，network 服务地址只有两个。

但是在实际工作中，经常需要自己在链接上拼接一些参数。像这样：

http://192.168.3.124:8000?page=xxx&id=xxx

以往都是先复制不含参数的 url，然后粘贴到浏览器输入框，再手动拼接上需要的参数。

感觉有点麻烦，能不能缩减步骤，在项目启动时多打印一些信息，比如已经拼接上参数的服务地址呢？

解决

我在 vue-cli 项目里全局搜索 App running at:，发现如果想让 vue-cli 创建的项目启动时在控制台新增可访问服务地址，只需要修改文件 node_modules@vue\cli-service\lib\commands\serve.js 就可以了。

依葫芦画瓢，只需要改动一点点代码就行了：

为了更具扩展性，也为了尽量少改源代码我在项目根目录创建了一个 testlink.config.js 文件：

// 一个获取当前电脑 ip 的包，需要下载
const address = require('address')
const ip = address.ip()

const network = `http://${ip}:8000`
const cid = process.env.NODE_ENV === 'production' ? '12124124' : '69678968'
const serveUrl = `${network}/main.html?cid=${cid}`

const logList = [
  ['调试', serveUrl],
  ['jira', `https://jira.com.cn?page=xxx&id=xxx`],
  ['wiki', `https://wiki.com.cn?page=xxx&id=xxx`],
  ['更多信息查看 README.md', '... ...']
]

module.exports = {
  logList
}

然后修改 node_modules@vue\cli-service\lib\commands\serve.js 文件：

加了这几行代码，大工就告成了。

重新启动一下项目看下效果：

不错，是我想要的效果。这样就可以直接双击复制链接，粘贴到到浏览器的插件中，再转为二维码，用手机扫一下就可以复制到链接了。

但是还没完，还需要用 patch-package 包来保存我们对包的修改，不然下次重新下载依赖改动就消失了。

因为我们只在开发中用到，所以下载到 devDependencies 中。

npm i patch-package -D

如果用的 yarn，还需要下载 postinstall-postinstall。如果用的 pnpm，就不需要用 patch-package 包了，pnpm 自带 patch 包功能。了解更多参考文档。

然后在 package.json 中添加脚本：

 "scripts": {
+ "postinstall": "patch-package"
 }

在我们已经修改包后，执行

npx patch-package @vue\cli-service

然后就会自动在项目根目录下生成一个 patches 目录。这样就成功了。

扩展

如何让浏览器把 url 或文本转为二维码，让手机扫码获取到该值。可以使用草料二维码。或者使用浏览器插件，我使用的是 postwoman，它带有转二维码功能。