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

背景

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

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

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

ini 复制代码
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 文件:

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 中。

shell 复制代码
npm i patch-package -D

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

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

diff 复制代码
 "scripts": {
+ "postinstall": "patch-package"
 }

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

shell 复制代码
npx patch-package @vue\cli-service

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

扩展

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

相关推荐
1undefined210 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck33 分钟前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
wzyoung1 小时前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
枣把儿2 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
paopaokaka_luck3 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
一大树3 小时前
Vue3祖孙组件通信方法总结
前端·vue.js
coder_zhx4 小时前
Vue3自定义编程式弹窗
前端·vue.js
独立开阀者_FwtCoder4 小时前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者4 小时前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源