保姆级教程：Docker 部署 Vue 项目 3 种方案，从入门到生产直接抄作业！

大家好，我是霸哥。

平时很多粉丝问我：Vue 项目打包完一堆 dist 目录，到底怎么用 Docker 跑起来？直接扔容器里？用 Nginx 还是 Node？多阶段构建又是啥？

今天这篇，一次性把开发、测试、生产三种场景的 Docker 部署方案讲透，代码直接复制就能用，再也不用到处搜零散教程。

---

一、先搞懂：Vue 部署到底在干嘛？

说白了，Vue 打包后就是纯静态文件：html、css、js、图片。它不像 SpringBoot 自带服务器，必须靠Web 服务器来托管。

所以 Docker 部署 Vue，本质就两件事：

1. 把 dist 目录放进容器
2. 用 Nginx 对外提供访问

方案不同，只是打包环境和运行环境的区别。

---

二、方案一：最简单粗暴 —— 本地打包 + Docker 运行

适合：本地已经 npm run build 好 dist，只想快速跑起来。

1. 项目结构

plaintext

vue-project/
├── dist/           # 本地已打包好
├── Dockerfile
└── nginx.conf

2. Dockerfile

dockerfile

# 直接使用 nginx 镜像
FROM nginx:stable-alpine

# 拷贝本地 dist 到 nginx 静态目录
COPY dist/ /usr/share/nginx/html/

# 拷贝自定义 nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 80 端口
EXPOSE 80

3. nginx.conf 解决刷新 404

nginx

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # 解决 Vue Router history 模式 404
    location / {
        try_files $uri $uri/ /index.html;
    }
}

4. 构建运行

bash

运行

# 构建镜像
docker build -t vue-simple .

# 启动容器
docker run -d -p 8080:80 --name vue-app vue-simple

优点：简单、快缺点：必须本地打包，换台机器就要重新打包

---

三、方案二：标准生产方案 —— Docker 多阶段构建

企业里最常用！一行命令，从源码到运行，不用本地装 node。

Dockerfile（多阶段）

dockerfile

# 阶段1：构建阶段 —— 只用来打包
FROM node:16-alpine as builder

# 设置工作目录
WORKDIR /app

# 拷贝 package 文件，利用缓存
COPY package*.json ./

# 安装依赖
RUN npm install --registry=https://registry.npmmirror.com

# 拷贝所有源码
COPY . .

# 打包生产环境
RUN npm run build

# ==========================================
# 阶段2：运行阶段 —— 只保留 dist + nginx，体积极小
FROM nginx:stable-alpine

# 从构建阶段拷贝 dist 到 nginx
COPY --from=builder /app/dist /usr/share/nginx/html/

COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

运行命令

bash

运行

docker build -t vue-prod .
docker run -d -p 8080:80 vue-prod

优点：

• 环境统一，不依赖本地环境
• 最终镜像极小，安全干净
• 适合 CI/CD 流水线

这才是真正生产级用法。

---

四、方案三：开发热更方案 —— Docker + 本地开发

适合：想在 Docker 里开发，改代码自动刷新。

dockerfile

FROM node:16-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

# 启动开发服务
CMD ["npm", "run", "dev"]

运行时映射端口和目录：

bash

运行

docker run -d -p 3000:3000 -v $(pwd):/app vue-dev

优点：开发环境统一缺点：不适合线上运行

---

五、霸哥踩坑总结（必看！）

1. Vue Router history 模式刷新 404一定要加 nginx 的 try_files $uri $uri/ /index.html;

2. 构建时下载依赖极慢用淘宝镜像：

   plaintext

   npm install --registry=https://registry.npmmirror.com
   

3. 多阶段构建不要少写 as builder不然第二阶段拷贝不到文件。

4. dist 目录没更新检查 Dockerfile 是否真的重新打包，而不是用旧缓存。

5. 端口映射不对访问不了左边是宿主机端口，右边是容器端口，别搞反。

---

六、总结

• 本地快速演示：用方案一（本地打包 + Nginx）
• 公司生产环境：用方案二（多阶段构建，标准推荐）
• Docker 开发环境：用方案三

一套流程下来，Vue 部署再也不是玄学。

你平时公司里用的是哪种部署方式？Nginx 还是 Caddy？有没有遇到过奇葩线上问题？评论区聊一聊，我来帮你诊断！

我是霸哥，我们下期继续硬核实战。