如何在Docker中打包部署Vue项目

1、vue 项目打包 dist

2、拷贝dist整个文件夹到Linux Service目录下（也可以通过压缩解压方式上传）

//解压dist压缩文件
unzip dist.zip
//在该目录下创建default.conf
vi default.conf

server {
     listen 80;
     server_name localhost; # 修改为docker服务宿主机的ip
    
     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 html;
     }
}

//创建Dockerfile
vi Dockerfile

//该镜像是基于nginx:latest镜像构建的
FROM nginx

//添加说明    
MAINTAINER zr  

//删除目录下的default.conf文件   
RUN rm /etc/nginx/conf.d/default.conf

//将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置    
ADD default.conf /etc/nginx/conf.d/
 
 //将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下
COPY dist/ /usr/share/nginx/html/


//确保 dist, default.conf,Dockerfile 同个目录下

3、拉取nginx镜像

docker pull nginx

4、构建vue项目的镜像

docker build -t xxxx .   //xxxx构建镜像名称

5、启动项目镜像

docker run -d -p 8887:80 --name web xxxx