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 dev` 或 `vite 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 DevTools 的 Device Mode。
手势/滚动测试
PC 模拟器无法 100% 还原移动端滚动曲线、长按、双击。
快速分享本地 DEMO
给产品、UI、后端同学一个二维码，立刻预览，无需部署测试环境。
自动化测试扫码入口
把二维码贴到测试报告里，让 QA 直接扫码回归。

注意事项

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

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

Github 地址 ：https://github.com/svitejs/vite-plugin-qrcode