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

相关推荐
ze_juejin11 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
小样还想跑2 小时前
axios无感刷新token
前端·javascript·vue.js
用户3802258598242 小时前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag2 小时前
报错 400 和405解决方案
vue.js·spring boot
白杨木影子被拉长2 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
长路 ㅤ   3 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
Jinxiansen02114 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
婉婉耶5 小时前
VUE带你乘风破浪~
前端·vue.js
乌兰麦朵5 小时前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai5 小时前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript