vue项目docker多阶段构建 生成dockerfile

Vue项目通过Docker多阶段构建可以将构建过程和应用运行环境分开管理，这有助于减小最终镜像大小，并提高效率。以下是创建Dockerfile的基本步骤，假设你已经有一个基于Node.js和npm的Vue项目：

1. **基础镜像阶段**（Build stage）：
- 使用官方Node.js镜像作为基础：`FROM node:latest`
- 安装依赖并设置工作目录：`WORKDIR /app`
- 将项目文件复制到容器：`COPY package*.json .`
- 运行 `npm install` 或者 `yarn install` 来安装生产依赖

   RUN npm ci || yarn install

2. **构建阶段**（如果项目有额外构建步骤）：
- 如果有如Babel转换、Webpack打包等构建任务，可以在这个阶段运行。例如，对于Vue项目，可能需要`RUN vue build`

3. **生产环境启动阶段**（Run stage）：
- 使用更轻量级的基础镜像（如Alpine），减少镜像体积：`FROM nginx:alpine`
- 设置Nginx配置：`COPY dist /usr/share/nginx/html`
- 配置Nginx监听端口：`EXPOSE 80`
- 启动Nginx服务

完整的Dockerfile示例：

# 第一阶段：安装依赖
FROM node:latest AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci || yarn install

# 第二阶段：构建应用
COPY . .
RUN if [ ! -d "dist" ]; then vue-cli-service build; fi

# 第三阶段：生产环境部署
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]