Docker+Nginx环境下Vue项目热重载功能失效求助

Hey there, let's break down this hot reload issue you're facing—since you mentioned it fails even without Nginx, we'll start with the core Docker and Vue DevServer configs first, then tweak the Nginx setup for when you re-enable it.

First: Fix Docker & Vue DevServer Core Issues #

This is almost certainly where the root problem lies, since removing Nginx didn't resolve the hot reload failure.

1. Force Vue DevServer to Listen on All Interfaces #

By default, Vue CLI's dev server only binds to localhost, which doesn't work inside a Docker container (the container has its own isolated network stack). Update your Vue config with this critical setting:

module.exports = {
    publicPath: '/app-ui',
    devServer: {
        disableHostCheck: true,
        host: '0.0.0.0', // *Critical*: allows connections from outside the container
        port: 8080, // Match the port your Docker container exposes
        overlay: {
            warnings: true,
            errors: true
        },
        // Add this to fix WebSocket routing when using a reverse proxy like Nginx
        client: {
            webSocketURL: 'ws://localhost:8080/app-ui/ws'
            // Adjust the URL to match your Nginx-exposed port and Vue publicPath
        }
    }
}

2. Verify Docker Compose Volume Mounts #

If your local project files aren't mounted into the container, changes on your host won't trigger any updates in the container. Your docker-compose.yml for the Vue service should look something like this:

services:
  app-ui:
    build: ./your-vue-project-path
    ports:
      - "8080:8080"
    volumes:
      - ./your-vue-project-path/src:/app/src # Mount src folder for live changes
      - ./your-vue-project-path/public:/app/public # Mount public assets too
      - /app/node_modules # Exclude node_modules to avoid host/container conflicts

Pro tip: Excluding node_modules prevents issues where host and container have mismatched binaries—this is a common gotcha!

3. Check Docker Network & Port Exposure #

Make sure your app-ui service's port is correctly exposed in Docker Compose, and there's no port conflict on your host. If you're using a custom network, ensure all services (including Nginx) are on the same network to communicate properly.

Nginx Configuration Tweaks (For When You Re-enable It) #

Once the core Docker/Vue issues are fixed, refine your Nginx config to ensure it plays nice with hot reload's WebSocket traffic:

server {
    listen 8080;
    listen [::]:8080;

    location /app-api/ {
        proxy_pass http://app-api:8080/; # Add trailing slash to avoid path mismatches
    }

    location /app-ui/ {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://app-ui:8080/app-ui/; # Match Vue's publicPath exactly
    }

    location /app-ui/ws {
        # Explicit proxy for Vue dev server's WebSocket endpoint
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_pass http://app-ui:8080/ws;
    }

    # SockJS fallback for older browsers (Vue CLI uses this under the hood)
    location /sockjs-node/ {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://app-ui:8080/sockjs-node/;
    }
}

The key here is matching proxy_pass paths to Vue's publicPath—Vue uses WebSockets for hot reload, so any routing misconfiguration here will break the feature.

Why Your Reference Project Worked #

Your older Webpack-based project likely had devServer.host: '0.0.0.0' configured explicitly, or used an older Vue CLI version where this was the default. Modern Vue CLI defaults to localhost for security, which clashes with Docker's network model.

Start with fixing the Vue dev server host and Docker volume mounts first—those are the most likely culprits. Let me know if you hit any snags!

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