1. 使用vue cli创建一个vue项目，构建生产环境资源（npm run build/ yarn build）,此时项目根目录下会多处一个dist文件夹

如果将该dist目录整个上传到服务器上，部署成静态资源站点就能直接访问到该项目。

2. 构建vue应用镜像

我们使用nginx镜像作为基础来构建我们的vue应用镜像。

docker pull nginx

2.1 创建nginx config配置

在项目根目录下创建nginx文件下，然后在该文件夹下新建default.conf

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;
    }
} 

2.2 创建Dockerfile文件

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

2.3 基于该Dockerfile构建vue应用镜像

docker build -t vuenginxcontainer .

2.4 启动vue app容器

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

 

参考资料： 手把手教你使用 Docker 部署 Vue.js 项目