Docker 中 Laravel 的 Vite 未检测到文件变化，Vue 组件不显示怎么办？

2026-11-06数据小许

结论

从给出的配置看，Vite 监听和浏览器连接需要分别排查。server.host 设为 127.0.0.1 时，Vite 只监听 node 容器内的回环地址；而 node 服务没有映射 5173 端口，宿主机上的浏览器通常无法连接容器内的 Vite 开发服务器。文件监听正常时，浏览器仍可能收不到 HMR 更新。

Vue 组件未显示，也需要检查挂载点和组件标签。当前用 <body id="app"> 作为挂载点，并在 Blade 中写了 <HomeComponent/>。可以改用普通的 div 容器和 kebab-case 标签。

让 Vite 监听容器外部连接

在 Vite 配置中将监听地址设为 0.0.0.0，让开发服务器监听容器的网络接口：

server: {
  strictPort: true,
  port: 5173,
  host: '0.0.0.0',
  origin: 'http://localhost:5173',
  hmr: {
    host: 'localhost',
  },
  watch: {
    usePolling: true,
  },
},

在 Docker Compose 的 node 服务中发布 Vite 端口：

node:
  image: node:current-alpine
  volumes:
    - ./src:/var/www/html
  ports:
    - "5173:5173"
  entrypoint: ["npm"]
  working_dir: /var/www/html

使用 docker compose run 启动一次性容器时，Compose 默认不会发布服务中声明的端口。可以运行 docker compose run --service-ports node run dev，或用 docker compose up node 启动服务。选择哪条命令取决于当前的启动方式。

hmr.host: 'localhost' 和 origin: 'http://localhost:5173' 适用于浏览器运行在 Docker 宿主机上，并通过宿主机的 5173 端口访问 Vite 的情况。如果浏览器在其他机器上，localhost 指向浏览器所在的机器。此时需要改用浏览器可访问的主机名或 IP，并相应调整端口映射和 HMR 地址。

检查文件监听

配置中的 usePolling: true 已启用轮询监听，通常可以应对 Docker 挂载目录无法及时传递文件变更事件的情况。启动 Vite 后，修改 resources/js/app.js 或 Vue 文件，查看 Vite 终端是否报告更新；再检查浏览器开发者工具中的网络连接能否连到 localhost:5173。

如果 Vite 终端没有发现文件变化，请确认编辑的文件位于 ./src 挂载目录中，并检查容器内对应文件是否同步更新。如果 Vite 终端能发现变化，但浏览器没有热更新，先检查端口映射、浏览器访问的主机名和 WebSocket 连接。

检查 Laravel 的 hot 文件

Laravel Vite 插件在开发服务器运行时会创建 public/hot 文件，用来记录开发服务器地址。删除这个文件后，Laravel 就不会再按开发服务器方式加载资源。因此，控制台错误消失并不能证明 Vite 连接已经修好。

如果开发服务器停止后 public/hot 仍然存在，可以删除这个残留文件，再重新启动 Vite。排查时也可以查看文件内容，确认地址能否被浏览器访问，以及页面是否尝试从该地址加载资源。

调整 Vue 的挂载标记

让 Blade 模板提供一个普通的应用容器，并使用 kebab-case 标签：

<body>
    <div id="app">
        <home-component></home-component>
    </div>
</body>

对应的 app.js 可以保留现有的注册关系，并挂载到这个容器：

import './bootstrap';

import { createApp } from 'vue/dist/vue.esm-bundler.js';
import HomeComponent from './components/HomeComponent.vue';

const app = createApp({});
app.component('home-component', HomeComponent);
app.mount('#app');

DOM 模板中的 HTML 标签名称会按 HTML 规则处理大小写。使用 kebab-case 写组件标签，并用相同名称注册，可以避免 <HomeComponent/> 和注册名称不匹配。普通的 div 容器也可以避免直接将整段 body 内容用作 Vue 应用的挂载模板。

建议的排查顺序

将 Vite 的 server.host 设为 0.0.0.0，并给 node 服务映射 5173:5173。
确认启动方式会发布该端口，并检查浏览器能否访问 Vite 开发服务器。
查看 Vite 终端是否检测到文件变化，再检查浏览器的资源请求和 HMR WebSocket 连接。
使用 div#app 和 <home-component></home-component> 验证 Vue 是否能挂载。
如果仍有报错，请结合浏览器控制台的完整错误信息继续判断。当前没有提供具体错误文本，无法确定是否还存在其他配置问题。