Docker环境中Laravel 10的Vue.js组件无法加载问题求助

核心原因 #

你遇到的连接拒绝问题，本质是Vite开发服务器运行在容器内部，但浏览器从本地访问时，请求的是容器内的127.0.0.1:5173，本地无法直接访问，同时Laravel生成的资源链接也没指向正确的外部可访问地址。

分步解决方案 #

1. 调整Docker Compose的npm服务配置 #

修改docker-compose.yml中的npm服务，添加端口映射和环境变量，让Vite允许外部访问：

npm:
  image: node:current-alpine
  container_name: npm
  volumes:
    - ./booking-app:/var/www/html
  user: node
  entrypoint: ["npm"]
  working_dir: /var/www/html
  ports:
    - "5173:5173"  # 映射Vite端口到本地
  environment:
    - HOST=0.0.0.0  # 让Vite监听所有网卡地址
    - PORT=5173

2. 启动Vite开发服务器时指定--host参数 #

用Docker Compose启动npm服务，运行dev命令时加上--host，确保Vite对外暴露：

docker-compose run --rm npm run dev -- --host

（--rm用于运行后自动销毁临时容器，避免残留无用容器）

3. 修改Laravel的Vite配置文件 #

在项目根目录的vite.config.js中，指定服务器的主机和资产URL，让Laravel生成正确的前端资源链接：

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0',
        port: 5173,
        // 指定本地访问Vite的地址，对应你本地映射的端口
        origin: 'http://localhost:5173'
    }
});

4. 重启相关服务 #

• 重启Laravel容器：

docker-compose restart laravel-docker

• 确保npm服务的dev命令正在运行，然后强制刷新浏览器（Ctrl+Shift+R）查看效果

额外检查项 #

• 确认.htaccess的public/隐藏规则没有拦截Vite的资源请求
• 检查容器运行状态：docker-compose ps，确保laravel-docker和npm服务正常启动
• 清除npm缓存（你已操作过，可忽略）：docker-compose run --rm npm cache clean --force

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