Docker 实现 Vue 自动化发布需通过多阶段构建（node 构建 + nginx 部署）、标准化镜像分层、Nginx history 模式配置及 CI/CD 集成，实现一键构建、快速回滚与多环境一致。
用 Docker 实现 Vue 项目自动化发布，核心是把构建、打包、容器化、部署流程标准化，让本地开发环境和生产环境保持一致，同时支持一键构建、快速回滚和多环境切换。关键不在“能不能”，而在于怎么设计好构建阶段、镜像分层和 CI/CD 集成点。
一、Vue 项目结构适配 Docker 构建
确保项目根目录下有标准的 package.json 和 vue.config.js（如有自定义配置），并确认构建产物默认输出到 dist/ 目录。不需要在项目里装 Docker 或 Node.js 运行时——构建过程由多阶段构建完成，最终镜像只含静态文件和轻量 Web 服务器。
- 推荐使用官方 node:18-alpine 作为构建基础镜像（体积小、更新稳定）
- 生产镜像建议用 nginx:alpine，轻量且对 SPA 的 history 模式天然友好
- 把 public/ 下的静态资源、dist/ 打包结果统一挂载或复制进 Nginx 的 /usr/share/nginx/html
二、编写多阶段 Dockerfile
这是自动化发布的基石。一个典型的 Dockerfile 如下（放在项目根目录）：
# 构建阶段 FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci --only=production=false COPY . . RUN npm run build <h1>生产阶段</h1><p>FROM nginx:alpine COPY --from=builder /app/dist/ /usr/share/nginx/html/ COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80
注意：npm ci 比 npm install 更可靠，能严格按 package-lock.json 安装；nginx.conf 需额外准备，用于支持 Vue Router 的 history 模式（404 重定向到 index.html）。
立即学习“前端免费学习笔记（深入）”；
三、配置轻量 Nginx 支持 History 路由
在项目中新建 nginx.conf，内容如下：
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
}这个配置确保用户直接访问 /user/123 这类前端路由时，Nginx 不返回 404，而是把请求交还给 Vue Router 处理。
四、接入 CI/CD 实现自动发布
以 GitHub Actions 为例，在 .github/workflows/deploy.yml 中定义流程：
- 监听 main 分支 push，触发构建
- 用 docker/build-push-action 构建镜像，并打上 latest 和 git commit SHA 标签
- 推送到私有 Registry（如 Harbor）或 Docker Hub
- 通过 SSH 或 Ansible 登录目标服务器，执行 docker pull + docker-compose up -d
如果用 docker-compose.yml 管理服务，可简化部署命令：
version: '3.8'
services:
web:
image: your-registry/vue-app:latest
ports: ["80:80"]
restart: unless-stopped整个流程无需手动上传 dist、不用配置服务器环境变量，每次合并代码即自动发布，失败时镜像不会覆盖旧版，回滚只需改 compose 文件中的 tag 并重启。
