# 前端单独部署 Dockerfile FROM node:18-alpine as builder # 设置工作目录 WORKDIR /app # 设置构建时环境变量 ARG VITE_API_BASE_URL=${VITE_API_BASE_URL:-http://localhost:8000/api} ENV VITE_API_BASE_URL=$VITE_API_BASE_URL # 复制前端代码 COPY frontend-vite/package*.json ./ RUN npm ci --include=dev COPY frontend-vite/ ./ # 确保iconfont文件在构建前存在 RUN mkdir -p public/assets COPY frontend-vite/src/assets/iconfont.js public/assets/ COPY frontend-vite/src/assets/iconfont.css public/assets/ RUN npm run build # 生产阶段 - 使用 nginx 提供静态文件服务 FROM nginx:alpine # 复制构建产物 COPY --from=builder /app/dist /usr/share/nginx/html # 确保iconfont文件正确复制 COPY --from=builder /app/public/assets/iconfont.js /usr/share/nginx/html/assets/ COPY --from=builder /app/public/assets/iconfont.css /usr/share/nginx/html/assets/ # 创建 nginx 配置文件 RUN echo 'server { \ listen 80; \ server_name localhost; \ root /usr/share/nginx/html; \ index index.html; \ \ # 处理 Vue Router 的 history 模式 \ location / { \ try_files $uri $uri/ /index.html; \ } \ \ # 静态资源缓存 \ location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { \ expires 1y; \ add_header Cache-Control "public, immutable"; \ } \ }' > /etc/nginx/conf.d/default.conf # 暴露端口 EXPOSE 80 # 启动 nginx CMD ["nginx", "-g", "daemon off;"]