Vite如何配置本地IP实现局域网访问？

Question

如何配置Vite项目使其可通过本地IP在局域网中访问？默认情况下，Vite 开发服务器仅绑定 localhost，导致其他设备无法通过局域网IP访问。需修改 `vite.config.js` 中的 `server.host` 配置项为 `'0.0.0.0'`，并设置 `server.port` 指定端口。同时确保防火墙允许该端口通信。配置后，局域网内其他设备即可通过 `http://[你的IP]:[端口]` 访问开发服务。

Answer 1

1. Vite 开发服务器的默认行为与局域网访问限制

在使用 Vite 构建前端项目时，默认情况下，开发服务器通过 vite dev 启动后会绑定到 localhost（即 127.0.0.1），这意味着仅本机可以访问该服务。这一设计出于安全考虑，防止未授权设备在局域网中直接连接开发环境。

然而，在多设备调试、移动端适配测试或团队协作预览等场景下，开发者需要让其他设备（如手机、平板或其他电脑）通过局域网 IP 地址访问开发服务器。此时，必须调整 Vite 的服务器绑定配置。

2. 核心配置：修改 vite.config.js 中的 server 选项

要实现局域网访问，关键在于修改 Vite 配置文件中的 server.host 和 server.port 字段。以下是标准配置示例：

/**
 * vite.config.js
 */
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0', // 允许外部网络访问
    port: 3000,      // 自定义端口
    strictPort: false, // 若端口被占用则自动尝试下一个
    open: true       // 启动时自动打开浏览器
  }
})

• host: '0.0.0.0' 表示监听所有网络接口，而非仅限于本地回环地址。
• port: 3000 指定服务运行端口，可根据需求更改。
• strictPort: false 提高可用性，避免因端口冲突导致启动失败。

3. 获取本机局域网 IP 地址的方法

配置完成后，需获取当前主机在局域网中的 IP 地址，以便其他设备连接。常用方法如下：

操作系统	命令	说明
Windows	ipconfig	查找 IPv4 地址，通常为 192.168.x.x 或 10.x.x.x
macOS / Linux	ifconfig 或 ip a	查看 en0 或 wlan0 接口的 inet 地址
通用 Node.js 脚本	require('os').networkInterfaces()	编程方式获取所有网卡信息

4. 防火墙与网络权限配置

即使 Vite 配置正确，若系统防火墙阻止了指定端口的入站连接，仍无法访问。以下为常见操作建议：

1. 检查操作系统防火墙是否允许 node 或 port 3000 的入站通信。
2. 在 Windows 上可通过“高级安全 Windows Defender 防火墙”添加入站规则。
3. macOS 用户可临时关闭防火墙测试，或通过 socketfilterfw 命令行工具管理。
4. Linux 系统推荐使用 ufw 或 iptables 开放端口：
   sudo ufw allow 3000
5. 确保路由器未启用客户端隔离（Client Isolation），否则设备间无法互访。

5. 安全性考量与生产环境对比

Vite 的开发服务器专为本地开发优化，不具备生产级安全性。开启 host: '0.0.0.0' 后，任何在同一局域网内的设备均可访问你的开发服务，可能存在以下风险：

• 源码暴露：HMR 接口和模块热更新通道可能泄露项目结构。
• 恶意请求：未经验证的设备可发送请求，影响开发稳定性。
• 性能干扰：多个设备同时加载资源可能导致内存压力增大。

因此，建议：

• 仅在必要时开启外网可访问模式。
• 避免在公共 Wi-Fi 环境下启用此配置。
• 使用完毕后恢复为 localhost 绑定。

6. 自动化脚本增强开发体验

为提升效率，可编写启动脚本自动输出访问地址。例如创建 dev.js：

const { execSync } = require('child_process')
const os = require('os')

function getLocalIP() {
  const interfaces = os.networkInterfaces()
  for (const name of Object.keys(interfaces)) {
    for (const iface of interfaces[name]) {
      if (iface.family === 'IPv4' && !iface.internal) {
        return iface.address
      }
    }
  }
  return 'localhost'
}

const ip = getLocalIP()
console.log(`\n👉 本地访问: http://localhost:3000`)
console.log(`🌍 局域网访问: http://${ip}:3000\n`)

execSync('vite', { stdio: 'inherit' })

7. 网络拓扑与设备连通性验证流程图

graph TD A[启动 Vite 开发服务器] --> B{host 是否设置为 0.0.0.0?} B -- 否 --> C[仅 localhost 可访问] B -- 是 --> D[监听所有网络接口] D --> E[检查防火墙是否放行端口] E -- 否 --> F[外部设备无法连接] E -- 是 --> G[获取本机局域网 IP] G --> H[其他设备访问 http://IP:端口] H --> I{能否正常加载页面?} I -- 是 --> J[配置成功] I -- 否 --> K[排查网络/插件/代理问题]