1. 获取 nginx 镜像
   docker pull nginx
2. 打包vue项目 npm run build,打包成功会出现dist文件夹
   
3. 在同目录下新建default.conf文件用于配置nginx，
   

文件内容如下

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #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. 在同目录下创建 Dockerfile 文件，用于docker配置
   
   Dockerfile文件内容如下

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

自定义构建镜像的时候基于Dockerfile来构建。

• FROM nginx 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
• COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下dist文件夹下的所有文件复制到镜像中/usr/share/nginx/html/ 目录下。
• COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是将nginx目录下的default.conf 复制到etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换nginx镜像里的默认配置。

5. 基于Dockerfile构建vue应用镜像

docker build -t vuenginxcontainer .

-t 是给镜像命名 . 是基于当前目录的Dockerfile来构建镜像
查看本地镜像命令

docker image

6. 启动 vue app 容器
   基于 vuenginxcontainer 镜像启动容器，运行命令：

docker run -p 3000:80 -d --name vueApp vuenginxcontainer

• docker run 基于镜像启动一个容器
• -p 3000:80 端口映射，将宿主的3000端口映射到容器的80端口
• -d 后台方式运行
• –name 容器名 查看 docker 进程

最后访问 http://localhost:3000 应该就能访问到该vue应用