此文章主要介绍windows开发环境下docker部署vue项目。

一、相关软件

vscode、Windows版docker（安装教程见window10家庭版安装docker）、vue项目（自行搭建或使用vue-cli搭建皆可，保证可以正常打包运行即可）

二、具体步骤

1.首先使用vscode打开vue项目。

2.本文选用 Nginx 镜像为基础来构建vue应用镜像，所以先拉取Nginx镜像到本地，在vscode命令窗口输入如下命令：

docker pull nginx 

可以看到拉取到的镜像为nginx:latest，也可打开docker desktop查看。

3.由于选用Nginx，所以前端需增加Nginx的相关配置文件，在项目根目录下创建 nginx 文件夹，该文件夹下新建 default.conf配置文件。

配置文件内容如下（Nginx相关配置说明可自行百度，此处不再介绍）

gzip on; #开启或关闭gzip on off
gzip_disable "msie6";
gzip_buffers 4 16k; 
gzip_comp_level 8; 
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;server {listen       8086;server_name  localhost;#charset koi8-r;access_log  /var/log/nginx/host.access.log  main;error_log  /var/log/nginx/error.log  error;location / {add_header 'Access-Control-Allow-Headers' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Origin' '*';root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri $uri/ /index.html;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}
}

4.在项目根目录下创建docker配置文件 Dockerfile 文件。

文件内容如下：

FROM nginx:latestCOPY dist/  /usr/share/nginx/html/COPY nginx/default.conf /etc/nginx/conf.d/default.conf

（1）FROM nginx:latest 表示该镜像是基于 nginx:latest 镜像构建的。
（2）COPY dist/ /usr/share/nginx/html/表示将项目根目录下 dist 文件夹下的所有文件复制到镜像中 的/usr/share/nginx/html/ 目录下,在nginx的default.conf配置文件中也可看到相关路径配置。

（3）COPY nginx/default.conf /etc/nginx/conf.d/default.conf表示将 nginx 目录下的 default.conf 文件复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。

5.打包vue项目，本文使用yarn build命令进行项目的打包。

6.打包完成之后，使用docker build -t test-docker:1.0.0 .命令来构建 Vue 应用镜像，其中-t 是镜像的名字及标签，通常 name:tag 或者 name 格式，.是基于当前目录的 Dockerfile 来构建镜像。

构建成功后可在docker desktop中查看构建好的镜像。
也可通过docker命令docker image ls 查看已有镜像。

7.基于创建的test-docker:1.0.0镜像启动一个 Docker 容器，执行如下命令

docker run -p 3060:8086 -d   --name vueApp test-docker:1.0.0

（1）-p 3060:8086表示端口映射，将宿主的3060端口映射到容器的8086端口（此端口为nginx所配置端口）。
（2 )-d 表示后台运行容器，并返回容器ID。
（3）--name vueApp表示容器名称。
（4）test-docker:1.0.0表示基于的镜像名称。

启动容器成功后可在docker desktop中查看。

也可通过docker命令docker ps 查看。

8.在浏览器中访问：http://localhost:3060，访问成功表示部署完成。

9.将镜像保存成 tar 归档文件发布版本给到实施人员，命令如下：
docker save -o test-docker.tar test-docker:1.0.0
（1）-o 后面为存储的路径