使用nginx官方镜像构建vue生产镜像需三个核心文件：dist目录、自定义default.conf（含history模式回退逻辑）、同级dockerfile；基于nginx:alpine，copy产物与配置，暴露80端口，cmd启动，支持子路径部署与静态资源缓存。
直接用 Nginx 官方镜像打基础，再注入 Vue 项目静态资源和定制配置，就能得到轻量、稳定、可复用的专属运行时镜像——不依赖 Node 环境，启动快，内存低，适合生产部署。
准备构建所需的核心文件
需要三个关键材料，缺一不可：
-
dist 目录：在本地执行
npm run build生成，确保已通过vue.config.js正确设置publicPath（如部署在子路径下，需设为/my-app/） -
自定义 Nginx 配置文件（推荐命名为
default.conf）：放在项目根目录或nginx/子目录下，内容需包含 Vue Router 的 history 模式兼容逻辑 -
Dockerfile：与
dist和配置文件同级，用于声明构建步骤
编写精简高效的 Dockerfile
采用 nginx:alpine 基础镜像，体积小、攻击面窄；避免冗余操作，只做必要覆盖：
FROM nginx:alpine # 清空默认首页，防止干扰 RUN rm -rf /usr/share/nginx/html/* # 复制打包产物到 Nginx 根目录 COPY dist/ /usr/share/nginx/html/ # 覆盖默认配置（注意路径必须是 /etc/nginx/conf.d/default.conf） COPY default.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
⚠️ 注意：COPY default.conf 必须指向 /etc/nginx/conf.d/ 下，Nginx 启动时会自动加载该目录所有 .conf 文件；若放错位置（如 /etc/nginx/nginx.conf），可能导致配置不生效。
配置支持 history 模式的 Nginx
Vue Router 使用 history 模式时，直接访问嵌套路由（如 /user/profile）会 404，需靠 Nginx 回退到 index.html。以下是最简可靠的 default.conf 片段：
server {
listen 80;
server_name _;
<p>root /usr/share/nginx/html;
index index.html;</p><p>location / {
try_files $uri $uri/ /index.html;
}</p><h1>可选：对静态资源加缓存头</h1><p>location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff2|ttf)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}</p>
如果项目部署在子路径（如 https://example.com/my-app/），则需同步调整两处：
-
vue.config.js中publicPath: '/my-app/' - Nginx 配置中增加
location /my-app/ { alias /usr/share/nginx/html/; ... }并配合try_files回退
构建、验证与发布
在含 Dockerfile 的目录下执行：
-
构建镜像：
docker build -t my-vue-app:v1.2 .（末尾点号不能省） -
本地测试：
docker run -d -p 8080:80 --name test-app my-vue-app:v1.2，然后访问http://localhost:8080 -
检查配置是否生效：进入容器
docker exec -it test-app sh，查看/etc/nginx/conf.d/default.conf内容及/usr/share/nginx/html/文件结构 -
导出为 tar 包（离线分发）：
docker save -o my-vue-app.tar my-vue-app:v1.2
镜像构建完成后即固化全部行为，无需额外启动脚本或环境变量干预，真正实现“一次构建、随处运行”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
