Laravel9 Docker环境下如何将Vite JS主机暴露至容器外部？

1. 调整Vite启动命令，监听所有网络接口 #

Vite默认只绑定127.0.0.1，容器内的这个地址无法被宿主机访问，直接修改项目package.json里的启动脚本：

"scripts": {
    "dev": "vite --host 0.0.0.0 --port 5173",
    // 保留其他原有脚本
}

2. 在Docker Compose中暴露Vite端口 #

编辑你的docker-compose.yml，给php服务添加端口映射，把容器内的5173端口映射到宿主机：

services:
  php:
    platform: linux/amd64
    build:
      context: .
      dockerfile: ./docker/php/dev/Dockerfile
    mem_limit: "512M"
    volumes:
      - type: bind
        source: ./api
        target: /usr/share/nginx/html/api
    ports:
      - "5173:5173" # 新增这行，暴露Vite开发服务器端口

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

调整项目根目录的vite.config.js，指定服务器参数，确保资源URL能被宿主机正确解析：

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', // 监听容器所有网络接口
        port: 5173, // 和启动命令的端口保持一致
        origin: 'http://localhost:5173', // 宿主机访问Vite的地址，用于生成资源前缀
    },
});

4. 可选：通过Nginx反向代理访问Vite（无需暴露5173端口） #

如果不想直接开放5173端口，可修改Nginx的default.conf，添加反向代理规则：

location /vite {
    proxy_pass http://php:5173; // 用docker-compose里的php服务名进行内部访问
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

同时把vite.config.js里的origin改成http://localhost:80/vite，这样所有Vite资源会通过Nginx的80端口转发。

验证操作 #

1. 重启Docker容器：docker-compose down && docker-compose up -d
2. 进入php容器启动Vite：docker-compose exec php npm run dev
3. 宿主机访问http://localhost，检查页面资源是否正常加载，或直接访问http://localhost:5173/resources/js/app.js确认资源可访问。

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