郑州医疗网站开发商品标题优化
将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;"]关键点说明：
- try_files配置解决Vue路由history模式404问题
- 配置了错误页面处理
- 使用COPY指令将配置文件覆盖默认配置
- 保持80端口暴露
构建命令不变：docker build -t vue-app . && docker run -p 8080:80 vue-app