如何在同一局域网的手机上访问localhost:3000的Vite React项目？

步骤1：修改Vite配置允许外部访问 #

Vite默认仅绑定localhost，要让局域网设备访问，需让服务监听0.0.0.0，有两种实现方式：

• 临时修改启动命令：打开项目根目录的package.json，将scripts里的dev命令修改为：

  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview"
  }
  

  保存后重新运行npm run dev，终端会输出包含局域网地址的日志：

  Local: http://localhost:5173/
  Network: http://192.168.x.x:5173/

• 通过配置文件永久设置：在项目根目录的vite.config.js中添加server.host配置：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    server: {
      host: '0.0.0.0' // 允许外部设备访问
    }
  })
  

  保存后重启开发服务，终端同样会显示局域网IP地址。

步骤2：确认电脑的局域网IP #

如果终端未显示Network地址，可手动查询：

• Windows：打开命令提示符，输入ipconfig，找到「无线局域网适配器WLAN」下的IPv4地址
• Mac/Linux：打开终端，输入ifconfig或ip addr，找到当前WiFi网络对应的inet地址

步骤3：手机访问应用 #

确保手机和电脑连接同一WiFi网络，打开手机浏览器，输入查到的局域网IP加端口号（比如http://192.168.1.105:5173），即可正常访问项目。

常见问题排查 #

• 若访问失败，检查电脑防火墙是否允许Vite默认端口（5173）的入站连接
• 确认手机和电脑处于同一子网，比如都连接同一个家庭WiFi，避免使用手机流量或不同办公网络
• 验证Vite服务确实绑定了0.0.0.0，终端日志会显示Local: ... Network: ...的提示

内容的提问来源于stack exchange，提问作者harsh