摘要：它会在启动 dev-server 时自动把局域网地址转成二维码并打印到终端，手机一扫即可进入页面。功能虽小，却让移动端调试体验瞬间拉满。
几乎所有前端同学都有类似经历：
步骤不多，但一天重复 N 次就会抓狂，尤其在真机调试布局、手势、深色模式时。
vite-plugin-qrcode 就是解决这个「不起眼却高频」的痛点
它会在启动 dev-server 时自动把局域网地址转成二维码并打印到终端，手机一扫即可进入页面。
功能虽小，却让移动端调试体验瞬间拉满。
名称vite-plugin-qrcode仓库HTTPS://github.com/svitejs/vite-plugin-qrcode体积，零运行时依赖适用Vite 2+ / 3+ / 4+ / 5+环境仅在 vite dev 或 vite preview --host 阶段生效，构建阶段自动剔除安装npm i -D vite-plugin-qrcode配置 vite.config.*import { defineConfig } from 'vite'import { qrcode } from 'vite-plugin-qrcode'export default defineConfig({ plugins: [ qrcode // 就这么简单 ]})启动并暴露局域网地址vite --host终端输出示例：
qrcode({ filter: url => url.includes('192.168.1')})必须在同一局域网
电脑和手机连同一 WiFi；公司网络若做 AP 隔离，需让运维放行。启动时加 --host
否则 Vite 只监听 localhost，手机无法访问。HTTPS 证书
若开启 server.https，iOS/Android 需先信任自签证书，否则会白屏。端口占用/防火墙
Windows 需放行 5173 端口；Mac/Linux 一般无额外设置。构建后自动失效
插件仅在 dev 和 preview 阶段生效，生产包不会把二维码代码打进去，放心使用。 来源：不秃头程序员
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!
