Docker环境下Laravel 11集成Vue组件无法加载问题求助

1. 修复Vite端口映射与服务绑定配置 #

你的Docker Compose未将容器内的Vite默认端口5173映射到宿主机，且Vite默认仅绑定127.0.0.1，导致宿主机无法访问容器内的Vite开发服务器。

修改vite.config.js，添加服务器配置： #

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
    // 添加以下服务器配置
    server: {
        host: '0.0.0.0', // 允许容器外部访问
        port: 5173,
        cors: true, // 解决跨域问题
    }
});

修改docker-compose.yml的laravel-docker服务，添加端口映射： #

services:
  laravel-docker:
    container_name: laravel-docker
    build: .
    volumes:
      - ./realtime:/var/www/html
    ports:
      - 9000:80  # Laravel应用端口
      - 5173:5173 # Vite开发服务器端口
    environment:
      - REDIS_HOST=redis
      - REDIS_PORT=6379
    networks:
      - app-network

2. 修正错误的package.json文件 #

你提供的package.json内容与vite.config.js完全重复，这会导致npm命令无法正常执行。替换为正确的配置：

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "dependencies": {
        "vue": "^3.4.0"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^5.0.0",
        "laravel-vite-plugin": "^1.0.0",
        "vite": "^5.0.0"
    }
}

修正后重新执行npm install确保依赖正确安装。

3. 正确执行Vite开发服务器 #

建议使用Docker Compose的npm服务运行npm run dev，避免权限问题（npm容器使用node用户，Laravel容器使用root用户）：

# 停止现有容器
docker-compose down

# 启动基础服务并运行Vite
docker-compose up -d laravel-docker mysql_db redis
docker-compose run --rm npm run dev

若坚持在Laravel容器内执行，运行：

docker exec -it laravel-docker npm run dev

4. 验证Laravel视图中的Vite资源引用 #

确保Blade模板正确引用Vite资源，而非直接访问localhost:5173。在视图文件（如resources/views/welcome.blade.php）中添加：

<!DOCTYPE html>
<html>
<head>
    <title>Laravel + Vue</title>
    @vite(['resources/js/app.js', 'resources/sass/app.scss'])
</head>
<body>
    <div id="app"></div>
</body>
</html>

通过http://localhost:9000访问Laravel应用，Vite会通过Laravel代理加载资源，避免跨域和路径问题。

5. 检查容器内文件权限 #

确保node_modules目录权限正确，避免容器内无法读写：

# 进入Laravel容器
docker exec -it laravel-docker bash

# 修改权限（若需要）
chown -R www-data:www-data /var/www/html/node_modules
chmod -R 755 /var/www/html/node_modules

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