将Vue项目打包成Docker镜像部署主要分为以下几个步骤：

1. Vue项目打包‌

执行npm run build生成dist文件夹，包含静态资源文件
注意检查index.html中资源引用路径是否正确（避免绝对路径问题）

2. 编写Dockerfile

Copy Code
FROM nginx:latest
COPY dist/ /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. 构建镜像‌

docker build -t vue-app .‌

4. 运行容器‌

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

5. 高级配置（可选）‌

• 自定义nginx配置：添加nginx.conf文件并COPY到/etc/nginx/nginx.conf
• 多环境配置：通过.env文件区分开发/测试/生产环境
• 使用docker-compose管理容器

完整示例项目结构：

• dist/ (Vue打包输出)
• Dockerfile
• nginx.conf (可选自定义配置)

访问方式：http://localhost:8080（端口号根据实际映射调整）

样例

以下是实现Vue项目Docker部署时自定义Nginx配置的完整方案：

1. 首先创建自定义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 index.htm;try_files $uri $uri/ /index.html;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}}
}

2. 修改后的Dockerfile配置：

Dockerfile

nginx:latest
COPY dist/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

关键点说明：

1. try_files配置解决Vue路由history模式404问题
2. 配置了错误页面处理
3. 使用COPY指令将配置文件覆盖默认配置
4. 保持80端口暴露

构建命令不变：docker build -t vue-app . && docker run -p 8080:80 vue-app