几乎所有前端同学都有类似经历:
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