Docker+Laravel+Vite环境下HMR模式无法加载资源文件求助

不用换Mix，Laravel当前官方默认推荐使用Vite，你的问题核心是Docker环境下Vite热模块替换（HMR）的网络配置不兼容，按以下步骤修复即可：

1. 调整Vite配置文件 #

修改项目根目录的vite.config.js，适配Docker容器的网络访问规则：

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, // 固定Vite端口，需和Docker映射端口一致
        hmr: {
            host: 'localhost', // 指定宿主机地址，让Laravel能访问到HMR服务
            port: 5173,
        },
    },
});

2. 确认Docker端口映射 #

在docker-compose.yml中，确保将Vite的5173端口映射到宿主机：

services:
    app:
        # 其他容器配置...
        ports:
            - "8000:80" # Laravel应用端口
            - "5173:5173" # Vite HMR端口映射

3. 更新Laravel环境变量 #

在项目根目录的.env文件中，配置正确的Vite服务地址：

APP_URL=http://localhost:8000
VITE_APP_URL=http://localhost:5173

4. 重启相关服务 #

• 停止当前运行的npm run dev进程和Docker容器
• 重新启动Docker容器
• 再次执行npm run dev启动Vite开发服务

5. 验证Blade调用格式 #

确保Blade模板中的@vite调用路径正确：

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

如果仍有问题，可尝试将Vite配置中hmr.host改为宿主机的局域网IP（如192.168.1.100），避免容器内localhost解析异常的问题。

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