如何让 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,它带有转二维码功能。

相关推荐
web130933203982 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
m0_748254884 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
苹果醋36 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计
关你西红柿子6 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根6 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
m0_748256567 小时前
Vue - axios的使用
前端·javascript·vue.js
慢知行8 小时前
Vite 构建 Vue3 组件库之路:工程基础搭建与目录结构优化
前端·vue.js
阿克苏的滚滚馕8 小时前
alioss 批量断点续传 开箱即用
javascript·vue.js
Simaoya8 小时前
【vue】圆环呼吸灯闪烁效果(模拟扭蛋机出口处灯光)
javascript·css·vue.js