在 Docker 中部署 Vue 项目能有效解决环境一致性问题。其主要流程包括准备构建产物、编写构建文件、制作镜像和运行容器。下面这个流程图概括了主要步骤和关键命令：

下面是每个步骤的具体细节和命令。

📦 准备 Vue 项目与构建文件

首先，你需要一个可以构建的 Vue 项目。在项目根目录下，执行构建命令生成静态资源文件：

npm run build

命令成功执行后，会在项目目录下生成一个 dist文件夹，这里面就是打包好的静态文件。

接下来是关键的一步：创建 Dockerfile。根据你是否希望在 Docker 镜像内完成从源码依赖安装到构建的全过程，有以下两种常见方式。

构建方式	优点	缺点	适用场景
​仅部署构建产物​	镜像体积小，部署速度快	需确保本地构建环境一致	​生产环境部署，推荐使用
​完整构建（源码至产物）​​	环境完全隔离，一致性极高	镜像体积大，构建时间长	需要绝对环境一致性或作为CI/CD一环

方式一：仅部署构建产物（推荐）

这种方法直接将本地构建好的 dist文件夹放入 Nginx 服务器。Dockerfile内容非常简洁：

dockerfile

# 使用轻量级的Nginx镜像作为基础
FROM nginx:alpine
# 将构建好的Vue项目(dist目录)复制到Nginx的默认静态文件目录
COPY ./dist /usr/share/nginx/html
# 暴露80端口
EXPOSE 80
# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]
[1,3](@ref)

方式二：完整构建（从源码开始）

这种方法使用多阶段构建，在 Docker 镜像内完成从安装依赖到构建的全过程，确保环境完全一致。

dockerfile

# 第一阶段：使用Node.js镜像来构建项目
FROM node:16.14.2 AS builder
WORKDIR /app
# 复制依赖定义文件并安装依赖
COPY package*.json ./
RUN npm install
# 复制源代码并执行构建
COPY . .
RUN npm run build

# 第二阶段：使用Nginx镜像来提供服务
FROM nginx:alpine
# 将第一阶段构建好的dist目录复制到Nginx中
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
[5,6](@ref)

⚙️ 配置 Nginx（可选但重要）

默认情况下，Nginx 能很好地服务 Vue 应用。但如果你的应用使用了 Vue Router 的 history模式，或需要配置反向代理，则需自定义 Nginx 配置。

1. 在项目根目录创建 nginx.conf文件。

2. 一个支持 history路由模式的基础配置如下：

nginx

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 支持Vue Router的history模式的关键配置
        try_files $uri $uri/ /index.html;
    }

    # 可以在此添加反向代理规则，解决API跨域问题
    # location /api/ {
    #     proxy_pass http://your-backend-service:port/;
    # }
}
[3,5](@ref)

1. 修改 Dockerfile，将这个配置文件复制到容器内 Nginx 的配置目录：

dockerfile

FROM nginx:alpine
COPY ./dist /usr/share/nginx/html
# 复制自定义的nginx配置，覆盖默认配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
[2,5](@ref)

🏗️ 构建镜像与运行容器

准备好 Dockerfile（和可选的 nginx.conf）后，就可以开始构建 Docker 镜像了。

1. ​构建 Docker 镜像​：在包含 Dockerfile的目录下执行以下命令。-t参数为镜像指定一个名称（如 my-vue-app），命令末尾的 .表示使用当前目录的 Dockerfile。

   docker build -t my-vue-app .

2. ​运行 Docker 容器​：镜像构建成功后，使用 docker run命令启动一个容器实例。-d参数让容器在后台运行，-p 8080:80将主机的 8080 端口映射到容器的 80 端口。

   docker run -d -p 8080:80 --name my-vue-app-container my-vue-app

🔍 验证与常用命令

完成以上步骤后，打开浏览器访问 http://你的服务器IP地址:8080，就能看到部署的 Vue 应用了。

以下是一些有用的 Docker 命令，用于管理你的应用：

• ​查看正在运行的容器​：docker ps

• ​查看所有容器（包括已停止的）​​：docker ps -a

• ​停止容器​：docker stop <容器ID或容器名>

• ​重新启动容器​：docker start <容器ID或容器名>

• ​删除容器​：docker rm <容器ID或容器名>

• ​删除镜像​：docker rmi <镜像名或镜像ID>

• ​查看容器日志​：docker logs <容器ID或容器名>

💡 进阶部署考虑

当你的应用需要连接后端 API 时，可以考虑使用 ​Docker Compose​ 来定义和运行多容器应用（例如前端、后端、数据库），从而轻松管理服务间的链接。