如何配置Docker Compose中的Nginx以适配Vue Router？

问题根源：Vue Router启用history模式后，直接访问/about这类子路由时，请求会被Nginx转发到http-server，http-server会尝试寻找对应路径的物理文件，找不到就返回404；而从根路径通过前端跳转是客户端路由处理，不会触发新的HTTP请求，因此可以正常访问。

方案一：修改Nginx配置适配反向代理场景 #

在HTTPS的server块中添加路由重写规则，将所有非静态文件的请求转发到http-server的根路径，让Vue应用处理路由：

修改后的Nginx配置：

server {
    listen 80;
    server_name mydomain.com;
    server_tokens off;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name mydomain.com;
    server_tokens off;

    ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://client:8080;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # 处理Vue Router history模式：优先查找静态文件，找不到则转发到根路径
        try_files $uri $uri/ @rewrite_to_root;
    }

    # 重写所有非静态文件请求到根路径
    location @rewrite_to_root {
        proxy_pass http://client:8080/;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

方案二：优化架构（推荐） #

去掉单独的http-server容器，直接用Nginx托管Vue构建产物，这样更高效且配置更简洁：

修改Docker Compose配置 #

services:
  nginx:
    image: nginx:latest
    restart: unless-stopped
    volumes:
      - ./data/nginx:/etc/nginx/conf.d
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
      # 挂载Vue构建产物到Nginx默认静态目录
      - ./apps/client/dist:/usr/share/nginx/html
    ports:
      - "80:80"
      - "443:443"
    command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"

  # 可选：保留client容器用于构建Vue产物，构建完成后可停止
  client:
    build:
      dockerfile: ./apps/client/Dockerfile
      context: ../../
    restart: "no"
    volumes:
      - ./apps/client/dist:/app/dist

修改Nginx配置 #

server {
    listen 80;
    server_name mydomain.com;
    server_tokens off;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name mydomain.com;
    server_tokens off;

    ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # 指定Vue构建产物目录
    root /usr/share/nginx/html;
    index index.html;

    # 处理Vue Router history模式：所有请求优先找静态文件，找不到返回index.html
    location / {
        try_files $uri $uri/ /index.html;
    }
}

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