✅ 一、目录结构（宿主机 /opt）

我们约定如下目录结构：

/opt/
├── vue-dist/            # Vue3 打包后的静态文件 (dist)
│   ├── index.html
│   └── assets/
└── nginx/
    ├── nginx.conf       # nginx 主配置文件
    └── default.conf     # vue 项目站点配置

---

✅ 二、Nginx 配置文件

1️⃣ /opt/nginx/nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
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;

    include /etc/nginx/conf.d/*.conf;
}

---

2️⃣ /opt/nginx/default.conf

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

---

✅ 三、Vue3 项目打包

在你的 Vue3 项目根目录执行：

npm run build

打包后会生成 dist/ 文件夹，把它复制到宿主机的：

/opt/vue-dist/

---

✅ 四、启动 Nginx 容器

执行以下命令：

docker run -d \
  --name vue-nginx \
  -p 80:80 \
  -v /opt/nginx/nginx.conf:/etc/nginx/nginx.conf:ro \
  -v /opt/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro \
  -v /opt/vue-dist:/usr/share/nginx/html:ro \
  nginx:latest

参数说明：

• -p 80:80：映射宿主机 80 端口
• -v /opt/nginx/nginx.conf:/etc/nginx/nginx.conf:ro → 映射主配置文件
• -v /opt/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro → 映射站点配置
• -v /opt/vue-dist:/usr/share/nginx/html:ro → 映射 Vue3 静态资源
• nginx:latest → 使用官方 Nginx 镜像
• :ro → 只读映射，防止容器修改宿主机文件

---

✅ 五、验证部署

打开浏览器访问：

http://<你的服务器IP>/

你应该可以看到 Vue3 的首页。

---

✅ 六、（可选）docker-compose 版本

如果你想更优雅地管理：

# /opt/docker-compose.yml
version: '3'
services:
  vue-nginx:
    image: nginx:latest
    container_name: vue-nginx
    ports:
      - "80:80"
    volumes:
      - /opt/nginx/nginx.conf:/etc/nginx/nginx.conf:ro
      - /opt/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
      - /opt/vue-dist:/usr/share/nginx/html:ro
    restart: always

然后执行：

cd /opt
docker compose up -d

---