此文章主要介绍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:latest

COPY 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 后面为存储的路径

注：

实际情况中通常前端存在静态配置文件需要实施人员去更改，在启动容器时可增加参数将本地宿主机的磁盘路径映射到镜像中，具体命令如下：

docker run -p 3070:8089 -v F:\public\static:/usr/share/nginx/html/static -d --name zongguiv zonggui-v

（1）-v表示绑定一个卷
上述命令表示将本机的F:\public\static与容器中/usr/share/nginx/html/static路径进行映射绑定，之后即可修改F:\public\static下的配置文件。/usr/share/nginx/html/static路径下为前端配置文件所在路径（根据nginx配置文件或者Dockerfile配置文件可知前端发布在/usr/share/nginx/html路径下）。