WSL中Docker部署Laravel+Vue.js遇阻：停留在Vite默认页无法访问

核心问题分析 #

你的配置存在两个关键矛盾：

1. 端口映射错误：你把宿主机8080映射到容器的Vite开发服务器端口5173，但Laravel后端的Apache服务跑在容器80端口，导致你访问的是Vite的独立服务，而非经过Laravel路由渲染的页面。
2. Apache文档根目录未指向Laravel的public目录：webdevops/php-apache镜像默认的网站根目录不是Laravel的public文件夹，Apache无法加载Laravel的入口文件。

分步解决方案 #

1. 修正Docker端口映射与Apache配置 #

修改docker-compose.yml，同时映射Apache的80端口和Vite的5173端口，指定Apache的文档根目录：

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    image: laravel-vue-app
    container_name: laravel_vue_app
    volumes:
      - ./volumes/app:/app
    ports:
      - "8080:80"       # Apache后端服务端口
      - "5173:5173"     # Vite开发服务器端口
    environment:
      - APACHE_DOCUMENT_ROOT=/app/public  # 让Apache指向Laravel的public目录

2. 调整Vite配置适配Docker+WSL环境 #

修改vite.config.js，确保热模块替换（HMR）能穿透容器环境：

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

export default defineConfig({
    server: {
        host: '0.0.0.0',
        port: 5173,
        hmr: {
            host: 'host.docker.internal'  // 用Docker内置域名指向宿主机，适配WSL
        }
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
});

3. 验证访问流程 #

• 重启容器：docker-compose down && docker-compose up -d
• 进入容器启动Vite开发服务：docker exec -it laravel_vue_app npm run dev
• 在浏览器访问http://localhost:8080，此时应该能加载Laravel路由渲染的页面，并正确挂载Vue组件。

额外检查项 #

• 确保web.php中已配置指向app.blade.php的路由：

Route::get('/', function () {
    return view('app');
});

• 确认app.blade.php中已正确引入Vite资产：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Vue App</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app"></div>
</body>
</html>

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