第一步：检查 Vue 项目打包输出
你已经使用 npm run build 进行打包，Vue 的默认打包输出文件通常在 dist/ 目录下。请确认该目录存在，并且包含 index.html 以及 assets/ 等静态文件。
第二步：编写 Dockerfile
在 Vue 项目的根目录下，新建一个 Dockerfile，内容如下：
# 使用 nginx 作为基础镜像 FROM nginx:latest# 删除默认的 nginx 静态文件目录 RUN rm -rf /usr/share/nginx/html/*# 复制 Vue 打包后的 dist 文件到 nginx 目录 COPY dist/ /usr/share/nginx/html/# 复制自定义的 Nginx 配置文件（可选） COPY nginx.conf /etc/nginx/nginx.conf# 暴露 80 端口 EXPOSE 80# 启动 nginx CMD ["nginx", "-g", "daemon off;"]
说明：
FROM nginx:latest：使用官方nginx作为基础镜像。COPY dist/ /usr/share/nginx/html/：将 Vue 打包后的文件复制到 Nginx 服务器的默认静态目录。EXPOSE 80：暴露 80 端口，让外部可以访问网站。CMD ["nginx", "-g", "daemon off;"]：设置 Nginx 作为前台进程运行。
第三步：可选的 Nginx 配置文件
如果你需要自定义 Nginx 配置，可以在项目根目录新建 nginx.conf：
worker_processes 1;events {worker_connections 1024; }http {include mime.types;default_type application/octet-stream; sendfile on;keepalive_timeout 65;server {listen 80;server_name localhost;location / {root /usr/share/nginx/html;index index.html;try_files $uri $uri/ /index.html; }error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}} }
注意：
try_files $uri $uri/ /index.html;这一行很重要，如果你的 Vue 项目是单页面应用（SPA），可以确保前端路由正确。
第四步：构建 Docker 镜像
在 Vue 项目的根目录（包含 Dockerfile 的目录）执行：
docker build -t my-vue-app .
说明：
docker build：用于构建 Docker 镜像。-t my-vue-app：给镜像取一个名字my-vue-app，方便后续运行。
第五步：运行 Docker 容器
docker run -d -p 8080:80 --name my-vue-container my-vue-app
说明：
-d：后台运行容器。-p 8080:80：将宿主机的8080端口映射到容器的80端口，这样你可以通过http://localhost:8080访问 Vue 项目。--name my-vue-container：给容器取一个名字my-vue-container。my-vue-app：使用上一步构建的镜像运行容器。
第六步：测试 Vue 应用
浏览器打开：
http://localhost:8080
第七步：管理 Docker 容器
常见的 Docker 操作命令：
# 查看正在运行的容器
docker ps# 查看所有容器（包括已停止的）
docker ps -a# 停止容器
docker stop my-vue-container# 删除容器
docker rm my-vue-container# 删除镜像
docker rmi my-vue-app# 重新运行容器（如果已创建）
docker start my-vue-container
说明
Windows 版 Docker 提供 Docker Desktop，你可以在 GUI（图形界面）上管理容器、镜像等资源。不过，Docker 主要是通过 命令行 操作的，GUI 只是辅助查看。你可以按照以下步骤，在 Windows 上通过 Docker Desktop 操作 Vue 项目。确认 Docker Desktop 运行正常 打开 Docker Desktop，确保它在运行状态。检查 Docker 是否可用 打开 Windows 终端（PowerShell 或 CMD），执行：docker version 如果 Docker 运行正常，会显示客户端和服务器的版本信息。
运行nginx报错问题处理
这个错误的主要原因是 Docker 无法从官方仓库拉取 nginx:latest 镜像，可能的原因包括：
- 网络问题：
- 访问
docker.io的网络不稳定，可能被防火墙拦截或 DNS 解析失败。
- 访问
- Docker 未正确登录：
- 需要
docker login登录 Docker Hub 账户。
- 需要
- Windows 代理问题：
- 可能需要配置 Docker Desktop 的代理或者使用国内镜像加速器。
方案 1：手动拉取 Nginx 镜像尝试手动拉取 nginx:latest 镜像：docker pull nginx:latest方案 2：使用国内镜像加速 Docker 默认从 docker.io 拉取镜像，但国内访问可能会超时，你可以使用 国内镜像加速器（例如阿里云或网易云）。步骤 1：修改 Docker Desktop 配置打开 Docker Desktop。进入 Settings（设置） → Docker Engine。找到 "registry-mirrors"，添加国内镜像：{"registry-mirrors": ["https://registry.docker-cn.com","https://mirror.ccs.tencentyun.com","https://hub-mirror.c.163.com","https://docker.mirrors.ustc.edu.cn"] }点击 Apply & Restart（应用并重启）。步骤 2：重新拉取 Nginx 镜像docker pull nginx:latest如果这一步成功，再次执行：docker build -t my-vue-app .
