上一篇中已经把基本需要用到的环境安装了一下，这一篇，把前端的vue项目打包并通过docker制作成镜像，启动并且运行到服务器上。话不多说下面直接开始。
1，打包vue项目,生成dist文件夹。这个是生成的前端页面。
npm run build:prod
2，在你电脑上或者服务器上新建docker-vue文件夹。把dist拷贝进去，并创建Dockerfile文件。
3，Dockerfile 是一个用来构建镜像的文件，我们可以在里面编写指令来构建自己的镜像具体的可以上网搜索一下。
# 镜像是基于什么什么构建的，如果不需要对nginx设置，你甚至不需要提前下载nginx的镜像FROM nginx:stable# 添加说明MAINTAINER zouzou# 将项目根目录下dist文件夹下的所有文件复制到镜像/usr/share/nginx/html/目录下COPY dist/ /usr/share/nginx/html/
4，构建镜像。先把创建的docker-vue文件夹复制到服务器上（也叫宿主机器），在docker-vue目录下执行构建命令。后面有个 . 要看清。
# -t ：指定要创建的目标镜像名# . ：Dockerfile 文件所在目录，可以指定Dockerfile 的绝对路径docker build -t dafang/vue:v1 .
5，docker images查看镜像，已经创建成功。
6，先停止我们原来测试时启动的nginx容器。然后使用我们新创建的镜像启动容器。8080端口需要我们在云服务器上配置开通，请参考上一篇。
docker psdocker stop 477e2889c5ec（容器id）docker run -itd -p 8080:80 --name vue dafang/vue:v1
7，下面就可以访问页面了。
8,查看应用程序日志。
docker logs -f 3f4516c6b4b9
喜欢的转发并推荐给小伙伴们关注吧。
