docker部署vue

# 使用官方的 Node.js 运行时镜像作为基础镜像
FROM node:14

# 设置工作目录
WORKDIR /app

# 将 package.json 和 package-lock.json 复制到容器中
COPY package*.json ./

# 安装依赖
RUN npm install

# 将项目文件复制到容器中
COPY . .

# 构建 Vue 项目
RUN npm run build

# 使用 Nginx 镜像来服务静态文件
FROM nginx:alpine

# 删除默认的 Nginx 配置
RUN rm -rf /usr/share/nginx/html/*

# 将构建好的 Vue 项目文件复制到 Nginx 的静态文件目录
COPY --from=0 /app/dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

解释说明：

1. 第一阶段：构建 Vue 项目

   • 使用 node:14 镜像来安装依赖并构建 Vue 项目。
   • WORKDIR /app 设置工作目录为 /app。
   • COPY package*.json ./ 将 package.json 和 package-lock.json 复制到容器中，以确保只在需要时下载依赖。
   • RUN npm install 安装项目依赖。
   • COPY . . 将所有项目文件复制到容器中。
   • RUN npm run build 构建 Vue 项目。

2. 第二阶段：使用 Nginx 服务静态文件

   • 使用 nginx:alpine 镜像来服务构建好的静态文件。
   • RUN rm -rf /usr/share/nginx/html/* 删除 Nginx 默认的静态文件。
   • COPY --from=0 /app/dist /usr/share/nginx/html 将构建好的 Vue 项目文件从第一阶段复制到 Nginx 的静态文件目录。
   • EXPOSE 80 暴露 80 端口，以便外部可以访问。
   • CMD ["nginx", "-g", "daemon off;"] 启动 Nginx 并保持前台运行。