使用Laravel Vite + Sail时静态资源出现404错误求助

针对你在Windows+WSL2+Docker环境下，使用Laravel Sail部署Breeze后，访问登录页出现/css/app.css和/js/app.js 404的问题，可按以下方向排查解决：

1. 修正Vite配置文件 #

修改vite.config.js，补充完整的server配置，确保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', // 允许容器外部访问Vite服务
        port: 5173,
        hmr: {
            host: 'localhost',
        },
        origin: 'http://localhost:5173' // 指定资源加载的来源地址
    },
});

默认情况下Vite服务仅绑定容器内的127.0.0.1，主机无法直接访问；origin配置会让@vite指令生成指向localhost:5173的资源路径，而非站点根路径。

2. 确认Blade模板的@vite指令 #

确保登录页或其继承的布局文件中，使用官方的@vite指令加载资源，不要手动编写link/script标签：

@vite(['resources/css/app.css', 'resources/js/app.js'])

@vite指令会根据开发/生产环境自动切换资源路径，手动写标签会导致路径错误。

3. 重启服务使配置生效 #

• 停止当前运行的sail npm run dev进程
• 执行sail down关闭容器，再执行sail up -d重启容器
• 重新运行sail npm run dev启动Vite开发服务

4. 检查WSL2端口映射 #

WSL2的端口转发可能出现异常，可按以下步骤验证：

1. 在WSL2终端执行netstat -tulpn | grep 5173，确认Vite服务监听0.0.0.0:5173
2. 在Windows主机CMD执行netsh interface portproxy show all，检查是否存在5173端口的转发规则
3. 若没有转发规则，手动添加（替换<WSL2_IP>为WSL2的IP，可通过hostname -I在WSL终端获取）：

netsh interface portproxy add v4tov4 listenport=5173 listenaddress=0.0.0.0 connectport=5173 connectaddress=<WSL2_IP>

5. 清除缓存 #

• 浏览器按Ctrl+Shift+R强制刷新页面，清除缓存的旧资源路径
• 执行sail artisan cache:clear和sail artisan view:clear清除Laravel视图及配置缓存

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