Vue 3 项目必须用 Docker 多阶段构建，因其能将构建与运行环境彻底分离：第一阶段用 Node 编译出 dist，第二阶段仅用 Nginx 托管静态文件，镜像体积从 1GB+ 压至约 20MB，启动快、攻击面小、符合生产规范。
Vue 3 项目用 Docker 多阶段构建，核心是把“构建”和“运行”彻底分开：第一阶段用 Node 环境打包出 dist，第二阶段只用轻量 Nginx 托管静态文件，最终镜像体积能从 1GB+ 压到 20MB 左右。
第一阶段：用 Node 构建产物
这一阶段只负责编译，不进最终镜像。关键点包括：
- 用
node:18-alpine或node:20-alpine镜像，比完整版小 50% 以上 - 先
COPY package*.json，再RUN npm ci --only=production（或yarn install --frozen-lockfile），利用 Docker 缓存加速 - 通过
.dockerignore排除node_modules、.git、dist等，避免无效复制 - 执行
npm run build（确保 script 中已配置 production 环境变量）
第二阶段：用 Nginx 运行静态资源
这一阶段完全不装 Node，只放构建结果和最小化运行环境：
- 基于
nginx:alpine或具体版本如nginx:1.28.0-alpine -
COPY --from=builder /app/dist /usr/share/nginx/html/，精准复制产物 -
COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf，支持 Vue Router history 模式和 404 fallback - 删掉默认配置，避免冲突；可加
HEALTHCHECK做容器健康探测 - 用
USER nginx降权运行，提升安全性
配套必须项：.dockerignore 和自定义 Nginx 配置
没有它们，多阶段优势会打折扣：
立即学习“前端免费学习笔记（深入）”；
-
.dockerignore 至少包含：
node_modules、dist、.git、.DS_Store、logs、coverage—— 防止本地开发文件污染镜像 -
nginx.conf 示例关键段：
location / { try_files $uri $uri/ /index.html; }—— 解决 history 路由刷新 404 问题gzip on;和expires 1y;可选，提升前端加载性能
构建与验证命令
写完 Dockerfile 后，终端执行：
-
docker build -t my-vue3-app .—— 构建镜像 -
docker run -d -p 8080:80 --name vue3-test my-vue3-app—— 启动容器 -
curl -I http://localhost:8080查看响应头，确认返回200 OK和text/html -
docker images | grep vue3查看镜像大小，正常应在 15–30MB 区间
