Dockerfile：

# 基础镜像：Nginx
FROM nginx:1.18.0

# 复制 Nginx 配置文件
COPY nginx.conf /etc/nginx/nginx.conf

# 创建前端资源存放目录
RUN mkdir -p /opt/project/vacation/vacation-front

# 复制前端构建产物到容器内
COPY . /opt/project/vacation/vacation-front

# 暴露端口（与 Nginx 配置的 listen 端口一致）
EXPOSE 82

nginx.conf：写法

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       82;  # 前端访问端口，可自定义
        server_name  localhost;

        # 静态资源托管（指向前端构建产物目录）
        location / {
            root   /opt/project/vacation/vacation-front;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;  # 解决 Vue 路由刷新 404 问题
        }

        # 反向代理后端接口（替换为你的后端服务地址）
        location /prod-api/ {
            proxy_pass http://192.168.3.90:8081/;  # 后端服务名:端口（需与后端 Docker 配置一致）
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
}