多阶段构建前端镜像的核心是设计上隔离：第一阶段用node:18-alpine安装依赖并执行npm run build生成dist；第二阶段用nginx:alpine仅copy --from=builder /app/dist和/nginx.conf，确保最终镜像不含node、源码、node_modules等任何构建残留。
多阶段构建在前端项目中剔除源码与构建工具，核心不是“删”，而是“不放进去”——从设计上让它们只存在于构建阶段，完全隔离于最终镜像。
第一阶段：构建环境要完整，但仅限内部使用
这一阶段用 node:18-alpine 或 node:20-slim 作为基础镜像，完整安装 devDependencies、TypeScript、Vite/Webpack 等工具链，并执行构建命令生成 dist/。关键操作包括：
- COPY package*.json ./ 放在最前，确保依赖安装层可缓存
- RUN npm ci --no-audit（不用 install），严格按 lock 文件还原依赖树
- COPY . . 在依赖安装之后，避免代码变更触发重装
-
RUN npm run build 输出产物到固定路径，如
/app/dist
第二阶段：运行环境必须纯净，只留必需项
这一阶段切换为 nginx:alpine（不用 latest），它不含 Node、npm、shell、git 等任何构建相关组件。只做两件事：
- COPY --from=builder /app/dist /usr/share/nginx/html/ —— 精准复制构建产物
- COPY --from=builder /nginx.conf /etc/nginx/nginx.conf —— 单独注入配置，不混入源码目录
禁止出现以下行为：
❌ COPY --from=builder /app .（会拖进 src/、.ts、package.json、node_modules）
❌ RUN apk add 或 RUN npm install（运行阶段不该有安装能力）
❌ 任何 COPY 涉及 src/、node_modules/、tsconfig.json、vite.config.ts 的路径
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
验证是否真正剔除：检查最终镜像内容
构建完成后，可用以下命令快速确认源码与工具是否被成功隔绝：
-
docker run --rm <image> ls -R / | grep -E "(src|node_modules|\.ts|\.js\.map|package\.json)"</image>—— 应无输出 -
docker run --rm <image> which node npm git</image>—— 应全部返回空 -
docker history <image></image>—— 最终镜像层应只有 nginx 和静态文件，无 RUN npm 相关记录
额外加固：配合 .dockerignore 防止误传
在项目根目录添加 .dockerignore，明确排除构建无关文件：
node_modules/src/-
public/（若未用于构建） tsconfig.json vite.config.ts webpack.config.js.git .env.local *.log
这能防止 COPY . . 时意外把本地开发文件带入 builder 阶段，进一步降低污染风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
