Vite 移动端调试利器!开发效率飙升 300%!

几乎所有前端同学都有类似经历:

  • npm run dev 跑起来,终端里出现一行 Network: http://192.168.x.x:5173/
  • 复制切微信发给自己手机点开 → 手输缺失的路径 → 终于可以调试了。

步骤不多,但一天重复 N 次就会抓狂,尤其在真机调试布局手势、深色模式时。

vite-plugin-qrcode 就是解决这个「不起眼却高频」的痛点

什么是 vite-plugin-qrcode?

vite-plugin-qrcode 是一个用于 Vite 开发环境的轻量插件

它会在启动 dev-server 时自动把局域网地址转成二维码并打印到终端,手机一扫即可进入页面。

功能虽小,却让移动端调试体验瞬间拉满。

插件简介

条目 信息
名称 vite-plugin-qrcode
仓库 github.com/svitejs/vit...
体积 < 20 kB,零运行时依赖
适用 Vite 2+ / 3+ / 4+ / 5+
环境 仅在 vite devvite preview --host 阶段生效,构建阶段自动剔除

快速上手

  • 安装
bash 复制代码
   npm i -D vite-plugin-qrcode
  • 配置 vite.config.*
ts 复制代码
   import { defineConfig } from 'vite'
   import { qrcode } from 'vite-plugin-qrcode'

   export default defineConfig({
     plugins: [
       qrcode()   // 就这么简单
     ]
   })
  • 启动并暴露局域网地址
bash 复制代码
   vite --host
  • 终端输出示例:

手机扫码即可进入页面,热更新sourcemap 完全正常。

可选配置

  • filter:当你的电脑有多块网卡时,可指定只对某些地址生成二维码:
js 复制代码
  qrcode({
    filter: url => url.includes('192.168.1')
  })

典型使用场景

  • 真机布局调试
    写一段媒体查询,手机直接看效果,不再折腾 Chrome DevToolsDevice Mode
  • 手势/滚动测试
    PC 模拟器无法 100% 还原移动端滚动曲线、长按、双击。
  • 快速分享本地 DEMO
    给产品、UI、后端同学一个二维码,立刻预览,无需部署测试环境。
  • 自动化测试扫码入口
    把二维码贴到测试报告里,让 QA 直接扫码回归。

注意事项

  • 必须在同一局域网
    电脑和手机连同一 WiFi;公司网络若做 AP 隔离,需让运维放行。
  • 启动时加 --host
    否则 Vite 只监听 localhost,手机无法访问。
  • HTTPS 证书
    若开启 server.https,iOS/Android 需先信任自签证书,否则会白屏。
  • 端口占用/防火墙
    Windows 需放行 5173 端口;Mac/Linux 一般无额外设置。
  • 构建后自动失效
    插件仅在 devpreview 阶段生效,生产包不会把二维码代码打进去,放心使用。

vite-plugin-qrcode 加进 plugins,从此告别手动复制地址,开发服务器一启动,手机扫码即可调试

  • Github 地址https://github.com/svitejs/vite-plugin-qrcode
相关推荐
weixin_456904274 小时前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu4 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_423391934 小时前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_423391934 小时前
React Hooks 钩子
前端·javascript·react.js
CUGGZ4 小时前
第三代 React,怎么玩?
前端·javascript·react.js
星哥说事4 小时前
狂揽82.7k的star,这款开源可视化神器,轻松创建流程图和图表
前端
硅基宙宇AIGC4 小时前
阿里Qoder重磅登场:AI编程平台新王者,程序员的饭碗要换了吗?
前端
影i4 小时前
跨域登录 / Token 共享 踩坑记录
前端
小爱同学_4 小时前
从前端模块化历史到大厂面试题
前端·javascript·面试