目录
一、先说明下主要的步骤
- 确保docker环境正常运行，不论是远程的还是本地的
- 确保vue项目能正常运行
- 将vue项目编译
- 编写Dockerfile文件
- 使用docker build命令生成镜像
- 使用docker run命令生成容器
二、具体详解
1.确保docker环境能够正常运行
linux安装docker环境：以CenterOS为例，参考CentOS Docker 安装 | 菜鸟教程
使用官方安装脚本自动安装
安装命令如下：
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun也可以使用国内 daocloud 一键安装命令：
curl -sSL https://get.daocloud.io/docker | sh使用命令：docker，弹出如图所示即说明安装成功
windows安装docker环境：以windows10为例，参考Windows Docker 安装 | 菜鸟教程
本次介绍windows10的安装方式，windows7/8请利用 docker toolbox 来安装，国内可以使用阿里云的镜像来下载，下载地址：docker-toolbox-windows-docker-toolbox安装包下载_开源镜像站-阿里云
windows10安装docker环境
1.需要开启Hyper-V，方式如图所示，在程序和功能打开
或者通过命令来启用 Hyper-V ，请右键开始菜单并以管理员身份运行 CMD/PowerShell，执行以下命令：Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All
2.下载和安装Docker桌面环境：Redirecting…
下载完后按安装引导安装即可，傻瓜式安装，不多做介绍
安装完，
启动docker，然后在CMD/PowerShell输入docker，弹出如图所示即说明安装成功
打开桌面管理工具就是长这样
远程连接docker服务
上面步骤做完，就可以在本地使用docker了，如果想要使用远程docker环境，则要配置远程docker（本地需要有docker环境才使用docker命令）
配置远程CenterOS环境下的docker
vi /lib/systemd/system/docker.service
CenterOS7及以上的，修改ExecStart这行为下面的值
ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H unix://var/run/docker.sock
CenterOS7以下的，修改ExecStart这行为下面的值
ExecStart=/usr/bin/dockerd -H fd:// -H tcp://0.0.0.0:2375
然后就是保存文件，重载，重启
systemctl daemon-reload
service docker restart查看以下能不能连接上docker服务，有信息打印出来就可以了
curl http://localhost:2375/version
配置windows环境下的docker可以参考我的另一篇文章
补充：在idea连接远程docker环境：设置idea连接远程docker环境
在linux 本地可以访问，但远程又连接不上（非Connection successful），很有可能是linux没有开放2375端口，检查一下linux的防火墙设置，具体可参考我的文章。
windows同理，如果访问不到，就需要在windows防火墙开放端口
2.确保vue项目能够正常运行
这里以vue3.0项目为例子，编译运行
直接使用npm，如果不知道是什么，建议学一下vue3.0
npm run serve
3.将vue项目编译
编译项目得到dist文件夹
npm run build 
4.编写Dockerfile文件
直接在src同级目录下，新建名为Dockerfile的文件，
编写Dockerfile文件，Dockerfile文件，具体怎么写，参考Docker Dockerfile | 菜鸟教程，下面是例子
# Docker image for vue application
# VERSION 1.0.0
# Author: Kannokaze
### 基础镜像，使用nginx镜像
FROM nginx
#暴露8080端口
EXPOSE 80
#作者
MAINTAINER Kannokaze <1131429439@qq.com>
#应用构建成功后的文件被复制到镜像内
COPY /dist /usr/share/nginx/html
#启动容器时的进程
ENTRYPOINT nginx -g "daemon off;"5.使用docker build命令生成镜像
使用命令，最后的【.】是必须的，代表Dockefile文件的路径，当然可以项目任意位置内，只要填写的Dockerfile路径正确即可
-t ：指定要创建的目标镜像名
. ：Dockerfile 文件所在目录，可以指定Dockerfile 的绝对路径
docker build -t kantools:v1.0.0 .
沒有出現警告或异常就算成功了，
然后去远程docker环境看下有没有镜像
docker images 
6.使用docker run命令生成容器
使用命令，生成名为kantoolsContains的容器
docker run -ti -d --name kantoolsContains1 -p 2333:80 kantools:v1.0.1
–name 容器命名
-p 2333:80 指定容器内部端口80指向宿主机容器端口2333
查看，容器是否正确生成
docker ps
大功告成，访问一下，http://ip:port（需要开放远程docker宿主linux的端口）