MacOS+Sail(Docker)+Vite环境下端口5173无法访问问题求助

核心问题分析 #

Laravel Sail容器与本地主机分属不同网络环境，你本地启动的Vite服务默认仅监听本地接口，导致容器内的应用无法连接5173端口，最终引发静态资源加载失败、热更新失效。

解决方案 #

方案1：调整Vite配置，允许跨网络访问 #

修改项目根目录的vite.config.js，让Vite监听所有网络接口并配置正确的热更新地址：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0', // 监听所有网络接口，让容器能访问
        port: 5173,
        cors: true, // 允许跨域请求
        hmr: {
            host: 'localhost', // 指定热更新用本地主机地址
        },
    },
});

方案2：配置容器访问本地Vite服务的地址 #

在项目根目录的.env文件中添加或修改：

VITE_DEV_SERVER_URL=http://host.docker.internal:5173

host.docker.internal是Docker提供的特殊域名，用于容器访问本地主机的服务。

方案3：映射Vite端口到容器（如果在容器内运行Vite） #

若你习惯在Sail容器内执行npm run dev，需在docker-compose.yml中添加端口映射：

services:
    laravel.test:
        # 保留原有配置
        ports:
            - "80:80"
            - "5173:5173" # 新增Vite端口映射

修改后重启Sail：

sail down && sail up -d

再进入容器启动Vite：

sail npm run dev

辅助排查步骤 #

1. 检查端口占用：在本地终端执行以下命令，确认5173端口未被其他进程占用：

lsof -i :5173

如果有占用，杀掉对应进程：

kill -9 <进程PID>

2. 防火墙检查：临时关闭macOS防火墙，测试是否能连接5173端口，排除防火墙拦截问题。

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