同一局域网下的设备访问本地 Vite 开发服务器

背景

在本地开发 Vue 或 React 应用时，默认的 http://localhost:5173 只能在本地访问。但在团队协作或移动端测试时，常需要让同一局域网下的其他设备访问你的开发环境。本文将详细介绍如何通过 修改 Vite 配置 和 使用工具 实现这一需求。

一、修改 Vite 配置暴露局域网访问

1. 修改 vite.config.js

在项目根目录中找到 vite.config.js，添加 server.host 配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  server: {
    host: '0.0.0.0', // 允许所有 IP 访问
    port: 5173,      // 指定端口号
    strictPort: true, // 端口占用时直接退出
  },
});

• host: '0.0.0.0'：允许所有网络接口（包括局域网 IP）访问。

• port: 5173：指定开发服务器端口，可修改为其他端口（如 3000）。

• strictPort: true：端口被占用时直接报错，而非尝试其他端口。

2. 重启开发服务器

修改后重启服务：

npm run dev

二、获取本机局域网 IP 地址

1. Windows 用户

1. 打开命令提示符（Win + R → 输入 cmd）。

2. 输入 ipconfig，找到 IPv4 地址，如 192.168.1.100。

2. macOS/Linux 用户

1. 打开终端。

2. 输入 ifconfig（macOS）或 ip addr（Linux），找到 inet 后的 IP 地址。

---

三、通过局域网 IP 访问

假设你的 IP 是 192.168.1.100，其他设备可通过以下地址访问：

http://192.168.1.100:5173/dashboard

四、防火墙设置

若其他设备无法访问，需开放端口：

1. Windows

1. 控制面板 → 系统和安全 → Windows Defender 防火墙 → 高级设置。

2. 入站规则 → 新建规则 → 选择“端口” → 输入 5173 → 允许连接。

2. macOS

1. 系统偏好设置 → 安全性与隐私 → 防火墙 → 防火墙选项。

2. 添加规则允许 5173 端口 TCP 连接。

---

五、使用 ngrok 生成公网 URL（无需配置局域网）

若不想暴露局域网 IP，可使用 ngrok 生成临时公网 URL：

1. 安装 ngrok

npm install -g ngrok

2. 启动服务

ngrok http 5173

输出示例：

Forwarding  https://abcd1234.ngrok.io → http://localhost:5173

六、验证与常见问题

1. 验证访问

在其他设备的浏览器中输入 http://<你的IP>:5173/dashboard，若看到页面即成功。

2. 常见问题

• 无法访问：检查防火墙、IP 地址是否正确、设备是否在同一网络。

• 端口占用：修改 vite.config.js 中的 port 或关闭占用端口的程序。

---

七、总结

通过以上步骤，你可以轻松实现：

1. 局域网访问：修改 Vite 配置绑定到 0.0.0.0。

2. 公网访问：使用 ngrok 生成临时 URL。

3. 跨设备协作：方便团队测试和移动端调试。

---

本文首发于 优快云，转载请注明出处。 如有疑问，欢迎在评论区留言讨论！