Vite开发必备！一键生成二维码，移动端调试超简单

概述

vite-plugin-qrcode 是一个 Vite 插件，用于在开发服务器启动时自动生成二维码，方便在移动设备上访问和调试开发服务器。该插件基于 qrcode-terminal 库生成控制台二维码。

功能特性

• 🚀 自动检测网络接口并生成二维码
• 📱 支持移动端扫码访问
• 🎯 可自定义过滤显示的网络地址
• 🔧 仅在开发模式和预览模式下工作
• ⚡ 轻量级，无额外依赖（基于 qrcode-terminal）

安装

npm install vite-plugin-qrcode --save-dev

或使用 yarn：

yarn add vite-plugin-qrcode --dev

基本使用

1. 导入插件

import { qrcode } from "vite-plugin-qrcode";

2. 添加到 Vite 配置

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { qrcode } from "vite-plugin-qrcode";

export default defineConfig({
  plugins: [
    vue(),
    qrcode(), // 添加二维码插件
  ],
});

3. 启动 Vite 开发服务器

vite --host

配置选项

PluginOptions

插件接受一个可选的配置对象：

interface PluginOptions {
  filter?: (url: string) => boolean;
}

filter 选项

用于过滤要显示二维码的网络地址。当你的机器有多个网络接口时很有用。

qrcode({
  filter: (url) => url.startsWith("http://192."), // 只显示 192 开头的地址
});

常用过滤示例：

// 只显示指定 IP
qrcode({
  filter: (url) => url === "http://192.168.1.100:5173",
});

// 排除内网地址
qrcode({
  filter: (url) => !url.startsWith("http://172."),
});

// 只显示无线网络地址
qrcode({
  filter: (url) => url.startsWith("http://192.168."),
});

完整配置示例

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { qrcode } from "vite-plugin-qrcode";

export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    qrcode({
      // 只显示局域网地址，排除 localhost
      filter: (url) => {
        return (
          url.startsWith("http://192.") ||
          url.startsWith("http://10.") ||
          url.startsWith("http://172.")
        );
      },
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

使用场景

移动端调试

在开发移动端应用时，可以直接扫码在手机上预览，无需手动输入 IP 地址。

多网络环境

在有多个网络接口的环境中，通过 filter 选项只显示需要的地址。

团队开发

团队成员可以通过扫码快速访问开发服务器。

注意事项

1. 仅开发模式可用：插件只在 vite dev 和 vite preview 模式下工作，生产构建时无效。
2. 网络连接要求：确保开发机器和移动设备在同一网络环境下。
3. 防火墙设置：某些网络环境可能需要调整防火墙设置允许相应端口访问。
4. 二维码大小：生成的二维码相对较小，建议在控制台放大显示或使用高分辨率终端。
5. 兼容性：需要支持彩色输出的终端环境。

故障排除

控制台无二维码显示

• 检查是否在开发模式下启动
• 确认机器有网络连接且能获取到网络 IP
• 尝试刷新页面或重启开发服务器

移动端无法访问

• 检查防火墙设置
• 确认移动设备和开发机器在同一网络
• 尝试更换端口或网络环境

总结

vite-plugin-qrcode 插件为现代前端开发提供了便捷的二维码生成功能，特别适合移动端开发和跨设备调试。插件设计简洁，易于集成，通过简单的配置即可实现所需功能。希望本文能帮助你更好地利用该插件提升开发效率。