在WSL上运行Laravel+Sail(Docker)+Vite(React)时资源文件404报错

1. 调整Vite配置文件 #

修改vite.config.js的server节点，适配Docker容器和WSL网络：

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react()
    ],
    server: {
        // 让Vite在容器内监听所有接口，保证外部能访问到服务
        host: '0.0.0.0',
        hmr: {
            // 指向宿主机localhost，适配WSL的网络映射
            host: 'localhost',
            // 明确HMR客户端端口，避免端口冲突
            clientPort: 5173
        },
        watch: {
            usePolling: true,
        },
        // 指定Vite资源的加载源，对应宿主机的Vite服务端口
        origin: 'http://localhost:5173',
        cors: true,
    }
});

2. 确认Docker端口映射 #

检查docker-compose.yml中是否包含Vite端口（默认5173）的映射，默认Sail配置已经自带，若没有则手动添加到laravel.test服务的ports列表：

services:
    laravel.test:
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:5173'

3. 重启服务并清理缓存 #

依次执行以下命令：

• 停止当前Sail服务：sail down
• 重新启动容器：sail up -d
• 清除Laravel缓存：sail artisan cache:clear
• 启动Vite开发服务器：sail npm run dev

4. 验证效果 #

访问http://localhost，此时页面会正确从Vite的5173端口加载资源，控制台不再出现404错误。

问题根源 #

• Docker容器内的服务默认监听localhost时，外部（WSL宿主机）无法访问，必须设置host: '0.0.0.0'开放所有接口。
• 开发模式下，Vite资源需要从独立的5173端口加载，origin配置确保页面能正确指向这个地址。
• WSL的网络环境特殊，HMR配置需要明确指向宿主机地址和端口，才能实现热更新和资源正常加载。

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