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
相关推荐
2503_9284115640 分钟前
9.26 数据可视化
前端·javascript·信息可视化·html5
我叫唧唧波1 小时前
【打包工具】webpack基础
前端·webpack
知识分享小能手3 小时前
React学习教程,从入门到精通,React 单元测试:语法知识点及使用方法详解(30)
前端·javascript·vue.js·学习·react.js·单元测试·前端框架
Ares-Wang5 小时前
Vue3 》》vite》》TS》》封装 axios ,Promise<T>
vue.js·typescript
PineappleCoder6 小时前
搞定用户登录体验:双 Token 认证(Vue+Koa2)从 0 到 1 实现无感刷新
前端·vue.js·koa
Min;6 小时前
cesium-kit:让 Cesium 开发像写 UI 组件一样简单
javascript·vscode·计算机视觉·3d·几何学·贴图
EveryPossible6 小时前
展示内容框
前端·javascript·css
伊织code7 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat
子兮曰7 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js
拉不动的猪7 小时前
回顾关于筛选时的隐式返回和显示返回
前端·javascript·面试