Docker部署vue教程指南

准备工作：先装好Docker和Node.js

在开始之前，确保服务器或本地电脑已安装 Docker（建议 20.10 以上版本）和 Node.js（建议 16 以上）。
如果还未安装，分别执行以下命令（以 Ubuntu / Debian 为例）：

• 安装 Docker：curl -fsSL https://get.docker.com | bash 然后 sudo usermod -aG docker $USER 并重新登录。
• 安装 Node.js：curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - 然后 sudo apt install -y nodejs。

检查版本：docker --version 和 node --version 确认正确输出。

第一步：创建并构建Vue项目

打开终端，执行 npm create vue@latest my-vue-app 创建一个 Vue 3 项目（按需选择配置，新手可直接回车使用默认）。
进入目录：cd my-vue-app。
运行 npm install 安装依赖，然后用 npm run build 生成生产文件。
打包完成后，项目目录下会出现 _dist_ 文件夹，里面就是我们要部署的静态资源。

第二步：编写 Dockerfile 和 Nginx 配置

在项目根目录新建一个文件 Dockerfile，内容如下：

# 使用 Nginx 作为基础镜像
FROM nginx:stable-alpine

# 将构建后的静态文件复制到 Nginx 默认目录
COPY dist /usr/share/nginx/html

# 复制自定义 Nginx 配置（可选）
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 80 端口
EXPOSE 80

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

再创建 nginx.conf 文件，写入以下简单配置（用于处理单页应用的路由）：

server {
    listen 80;
    server_name localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;  # 防止刷新 404
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

注意：try_files 这行很关键，Vue Router 的 history 模式需要它才能正确处理路由。

第三步：构建镜像并运行容器

在项目根目录执行：docker build -t my-vue-app .（注意最后有个点）。
等待构建成功后，运行容器：docker run -d -p 8080:80 --name vue-app my-vue-app。
现在可以通过 http://localhost:8080 访问你的 Vue 项目了。

常见问题与避坑指南

• 构建报错 dist 不存在：确认之前已执行过 npm run build，且项目根目录下有 dist 文件夹。
• 访问页面空白或控制台 404：检查 Dockerfile 中是否正确复制 dist 到 /usr/share/nginx/html，以及 nginx.conf 的 try_files 配置是否添加。
• 端口被占用：运行 docker ps 查看已有容器，或修改 -p 参数为其他端口，如 -p 3000:80。
• 想修改端口映射：先停止容器 docker stop vue-app，删除 docker rm vue-app，再用新端口启动。
• 生产环境建议使用 nginx:alpine 而非 stable-alpine：stable-alpine 体积更小，但 alpine 更轻量；两者均可。重点：生产环境一定要关闭 Nginx 的 autoindex 并设置适当的安全头。

验证部署是否成功

1. 打开浏览器访问 http://你的服务器IP:8080，正常显示 Vue 首页。
2. 点击页面内链接跳转，URL 变化且正常显示组件（说明 history 模式路由生效）。
3. 直接刷新页面（按 F5），不出现 404 错误。
4. 执行 docker logs vue-app，确认无错误日志。

如果你正在处理 Docker部署vue，建议先按本文步骤完整执行，再根据自己的环境做微调；
遇到异常时优先回看避坑和高频问题部分。