幾乎所有前端同學都有類似經(jīng)歷：

• npm run dev 跑起來，終端里出現(xiàn)一行 Network: http://192.168.x.x:5173/。
• 復制 → 切微信 → 發(fā)給自己 → 手機點開 → 手輸缺失的路徑 → 終于可以調(diào)試了。

步驟不多，但一天重復 N 次就會抓狂，尤其在真機調(diào)試布局、手勢、深色模式時。

vite-plugin-qrcode 就是解決這個「不起眼卻高頻」的痛點。

什么是 vite-plugin-qrcode？

vite-plugin-qrcode 是一個用于 Vite 開發(fā)環(huán)境的輕量插件

它會在啟動 dev-server 時自動把局域網(wǎng)地址轉(zhuǎn)成二維碼并打印到終端，手機一掃即可進入頁面。功能雖小，卻讓移動端調(diào)試體驗瞬間拉滿。

插件簡介

快速上手

安裝：

npm i -D vite-plugin-qrcode

配置 vite.config.*：

import { defineConfig } from 'vite'
   import { qrcode } from 'vite-plugin-qrcode'

   export default defineConfig({
     plugins: [
       qrcode()   // 就這么簡單
     ]
   })

啟動并暴露局域網(wǎng)地址：

vite --host

終端輸出示例：

手機掃碼即可進入頁面，熱更新、sourcemap 完全正常。

可選配置

filter：當你的電腦有多塊網(wǎng)卡時，可指定只對某些地址生成二維碼：

qrcode({
    filter: url => url.includes('192.168.1')
  })

典型使用場景

• 真機布局調(diào)試：寫一段媒體查詢，手機直接看效果，不再折騰 Chrome DevTools 的 Device Mode。
• 手勢/滾動測試：PC 模擬器無法 100% 還原移動端滾動曲線、長按、雙擊。
• 快速分享本地 DEMO：給產(chǎn)品、UI、后端同學一個二維碼，立刻預覽，無需部署測試環(huán)境。
• 自動化測試掃碼入口：把二維碼貼到測試報告里，讓 QA 直接掃碼回歸。

注意事項

• 必須在同一局域網(wǎng)：電腦和手機連同一 WiFi；公司網(wǎng)絡若做 AP 隔離，需讓運維放行。
• 啟動時加 --host：否則 Vite 只監(jiān)聽 localhost，手機無法訪問。
• HTTPS 證書：若開啟 server.https，iOS/Android 需先信任自簽證書，否則會白屏。
• 端口占用/防火墻：Windows 需放行 5173 端口；Mac/Linux 一般無額外設置。
• 構(gòu)建后自動失效：插件僅在 dev 和 preview 階段生效，生產(chǎn)包不會把二維碼代碼打進去，放心使用。

把 vite-plugin-qrcode 加進 plugins，從此告別手動復制地址，開發(fā)服務器一啟動，手機掃碼即可調(diào)試。

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