Laravel 10 + React局域网运行时@vite/client连接超时问题求助

当你在局域网中运行Laravel 10 + React项目时出现@vite/client net::ERR_CONNECTION_TIMED_OUT错误，核心原因是Vite开发服务器默认仅绑定本地回环地址，导致局域网内其他设备无法建立连接，同时HMR（热模块替换）的配置也需要适配局域网环境。

以下是具体的修复步骤：

• 修改vite.config.js配置
  将server部分的配置调整为监听所有网络接口，并指定HMR主机为你的局域网IPv4地址（比如192.168.1.100，需替换为你实际的IP）：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
        // 监听所有网络接口，允许局域网设备访问
        host: '0.0.0.0',
        // 可选：指定端口，避免冲突（默认是5173）
        // port: 5173,
        hmr: {
            // 设置为你的局域网IPv4地址
            host: '192.168.1.100',
        },
    }
});

• 更新.env文件中的APP_URL
  把项目根目录下的.env文件里的APP_URL修改为你的局域网IP加Vite端口，例如：

  APP_URL=http://192.168.1.100:5173
  

• 检查防火墙设置
  确保你的电脑防火墙允许Vite默认端口（5173）的入站连接，避免局域网设备被防火墙拦截。

• 重启Vite开发服务器
  关闭当前运行的npm run dev或php artisan serve命令，重新启动服务，让配置生效。

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