多阶段构建中package.json被覆盖，Vue+Express容器构建遇阻

问题根源 #

1. 前后端package.json混淆：前端构建阶段错误复制了后端的package*.json，导致执行npm run build时调用的是后端配置，而后端package.json里没有build脚本，触发报错。
2. 路径错误：Dockerfile中多处将frontend误写为front，导致文件复制失败。
3. 构建职责混乱：前端阶段安装后端依赖、后端阶段安装前端构建工具，完全不符合分层构建逻辑。

修正后的Dockerfile #

# 前端构建阶段：专门处理Vue项目的编译打包
FROM node:20 as frontend-builder

WORKDIR /app/frontend
# 先复制前端package文件，利用Docker缓存优化构建速度
COPY ./frontend/package*.json ./
# 安装前端完整依赖（含开发依赖，因为vite构建需要）
RUN npm install
# 复制前端所有源码
COPY ./frontend .
# 执行前端构建，生成dist静态文件目录
RUN npm run build

# 后端运行阶段：仅部署Express服务及前端静态文件
FROM node:20 as backend-runner

WORKDIR /app/backend
# 复制后端package文件，安装生产依赖
COPY ./backend/package*.json ./
RUN npm install --omit=dev
# 复制后端源码
COPY ./backend .
# 从前端构建阶段复制打包好的dist目录到后端的public目录（确保Express能访问静态文件）
COPY --from=frontend-builder /app/frontend/dist ./public

# 启动Express服务
CMD ["npm", "start"]

核心优化点 #

• 分层隔离：前后端构建完全分离，各自使用独立的工作目录和依赖配置，彻底避免package.json被覆盖的问题。
• 缓存利用：先复制package文件再执行npm install，后续代码变更时无需重新安装依赖，提升构建效率。
• 依赖精准：前端阶段安装完整依赖（含开发依赖用于构建），后端阶段仅安装生产依赖，减少镜像体积。
• 路径修正：统一使用frontend目录名，消除路径错误导致的文件缺失问题。

内容的提问来源于stack exchange，提问作者Lenskha