1、docker安装nginx

docker pull nginx

2、vue执行打包命令打dist包

npm run build

3、将dist包放置发布目录
4、发布目录创建Dockerfile文件（与dist文件夹同级）

FROM nginx:latest
 
#将配置文件复制到Nginx指定文件夹下
COPY ./dist /dist
COPY ./nginx.conf.template /
#构建自定义环境变量
CMD envsubst < /nginx.conf.template > /etc/nginx/nginx.conf \
	&& cat /etc/nginx/nginx.conf \
	&& nginx -g 'daemon off;'

5、同级创建nginx.conf.template文件（与dist文件夹同级）

user nginx;
 
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   /dist;
			#设置访问端口首页
            index  index.html index.htm;
        }
		#设置报错跳转页面，不需要可注释或删掉
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

4、将三个文件上传到Linux发布目录，cd到这Dockerocker镜像和容器