Docker部署Laravel应用时Vite资源加载异常求助

错误原因 #

控制台出现net::ERR_BLOCKED_BY_CLIENT是因为Vite生成的资源URL为http://[::]:5173/xxx，浏览器无法正确解析IPv6格式的地址，且未配置正确的局域网访问地址，导致请求被拦截。

修正步骤 #

1. 调整vite.config.js配置 #

替换原有配置为以下内容，确保Vite生成正确的资源访问地址：

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

export default defineConfig({
    server: {
        host: '0.0.0.0', // 允许容器内Vite监听所有网络接口
        port: 5173,
        origin: 'http://192.168.1.216:5173', // 指定局域网可访问的Vite服务地址
    },
    hmr: {
        host: '192.168.1.216', // 局域网机器IP
        port: 5173,
        protocol: 'ws',
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

2. 更新Docker Compose配置 #

如果npm run dev是在PHP容器内运行，需要给PHP服务添加Vite端口映射，确保外部能访问：
在freelancerapp服务的配置中添加ports字段：

#PHP Service
freelancerapp:
  build:
    context: .
    dockerfile: Dockerfile
  image: php:8.1.0-fpm
  container_name: freelancerapp
  restart: unless-stopped
  tty: true
  environment:
    SERVICE_NAME: freelancerapp
    SERVICE_TAGS: dev
  working_dir: /var/www
  volumes:
    - ./:/var/www
    - ./php/local.ini:/usr/local/etc/php/conf.d/local.ini
  ports:
    - "5173:5173" # 映射Vite开发服务器端口
  networks:
    - freelancerapp-network

3. 重启服务并重新运行Vite #

1. 重启Docker容器：

docker-compose down && docker-compose up -d

2. 进入PHP容器运行Vite开发服务器：

docker exec -it freelancerapp npm run dev

关键说明 #

• origin参数强制Vite生成指定的资源URL，避免浏览器解析出[::]:5173这种无法访问的地址。
• host: '0.0.0.0'确保Vite服务在容器内可被外部访问，配合Docker端口映射实现局域网访问。
• 若你是在宿主机直接运行npm run dev，无需修改Docker Compose的端口映射，只需保证宿主机5173端口未被占用，且vite.config.js配置正确即可。

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