1，获取Nginx镜像

docker pull nginx

2，创建Nginx文件夹存放conf,html,Dockerfile文件（我的目录为/root/nginx）

mkdir conf html

touch Dockerfile

3，将vue项目编译，生成dist文件夹，将整个文件夹上传到Nginx目录下;如图：

4，编写Dockerfile文件

vi Dockerfile

添加一下内容：

FROM nginxCOPY dist/ /usr/share/nginx/html/COPY conf/nginx.conf /etc/nginx/nginx.conf

命令的意思该镜像是基于 nginx:latest 镜像而构建的。

FROM nginx

命令的意思该镜像是基于 nginx:latest 镜像而构建的。

COPY dist/ /usr/share/nginx/html/

用本地的 nginx.conf 配置来替换nginx镜像里的默认配置。

COPY conf/nginx.conf /etc/nginx/nginx.conf

5，创建Nginx镜像(注意后面的空格和点)

docker build -t nginx .

6，查看创建好的镜像

docker images

7，运行并创建nginx容器

docker run -d -p 80:80 nginx

8，查看运行的容器

docker ps

然后从浏览器上访问ip:80出现项目的首页，部署成功

注意：一定要注意打包时ip的修改，本人踩过这坑

结束语：如那儿有不对的地方希望大佬指正，如对您有帮助，我就不白忙活。希望顺手点个赞嘿嘿(*^▽^*)