如何解决跨设备访问Laravel应用时出现的ERR_CONNECTION_REFUSED错误

问题现象 #

使用XAMPP部署Laravel应用到本地服务器后，本机访问正常，但其他设备通过http://ip_server/my_aplication/public/login访问时，出现以下资源加载错误：

GET http://[::1]:5173/@vite/client net::ERR_CONNECTION_REFUSED
GET http://[::1]:5173/resources/js/app.js net::ERR_CONNECTION_REFUSED
GET http://[::1]:5173/resources/css/app.css net::ERR_CONNECTION_REFUSED

解决方法 #

1. 构建生产环境静态资源（推荐） #

Vite开发模式下会启动本地5173端口的服务，仅本机可访问。其他设备无法连接该端口，因此需要编译生产环境资源：

• 在项目根目录执行命令：

  npm run build
  

  该命令会将JS、CSS等资源打包到public/build目录，Laravel会自动加载打包后的资源，不再依赖Vite开发服务器。

2. 配置Vite允许外部设备访问开发服务（开发阶段用） #

若需在开发阶段让其他设备实时预览，修改vite.config.js配置：

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0', // 允许所有IP访问Vite服务
        port: 5173,
        hmr: {
            host: '你的服务器局域网IP', // 替换为服务器实际IP，如192.168.1.100
        },
    },
});

• 重启Vite开发服务器：

  npm run dev
  

• 确保服务器防火墙开放5173端口，允许局域网设备访问。

3. 修正Laravel的APP_URL配置 #

在项目根目录的.env文件中，设置正确的服务器访问地址：

APP_URL=http://你的服务器IP/my_aplication/public

• 清除配置缓存：

  php artisan config:clear
  

4. 检查XAMPP Apache配置 #

• 打开httpd.conf，确认Listen指令未限制为仅本机访问：

  Listen 80
  

• 确保项目目录权限正确，Apache拥有读取文件的权限。

内容的提问来源于stack exchange，提问作者Arsenio sergio Langa