1.创建vue项目

vue create xxxx

2.vue根目录下创建.dockerignore文件

node_modules

3.vue根目录下创建目录（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;
    }
}

4.vue根目录下创建Dockerfile文件

前端的配置（当前教程需要的）

# 指定node镜像对项目进行依赖安装和打包
FROM node AS builder
# 将容器的工作目录设置为/app(当前目录，如果/app不存在，WORKDIR会创建/app文件夹)
WORKDIR /app 

COPY . /app/

RUN npm config set registry "https://registry.npm.taobao.org/"
RUN npm install
RUN npm run build 

#指定nginx配置项目，--from=builder 指的是从上一次 build 的结果中提取了编译结果(FROM node as builder)，即是把刚刚打包生成的dist放进nginx中
FROM nginx
COPY --from=builder /app/dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf


#暴露容器8888端口
EXPOSE 7788

后端的配置（这个不需要，忽略）

# 指定node镜像对项目进行依赖安装和打包
FROM node
# 将容器的工作目录设置为/app(当前目录，如果/app不存在，WORKDIR会创建/app文件夹)
WORKDIR /app 

COPY . /app/

RUN npm config set registry "https://registry.npm.taobao.org/"
RUN npm install

#暴露容器5000端口
EXPOSE 5000

CMD [ "npm", "start" ]

5.vue根目录下创建docker-compose.yml文件（如果需要用docker-compose）

version: "2.0"
services:
  web1: # 前端node容器(运行nginx中的Vue项目)
    container_name: vue-demo # 容器名为''
    build:
      context: ./ # 指定设定上下文根目录，然后以该目录为准指定Dockerfile
      dockerfile: Dockerfile
    ports:
      - "7788:80" # 映射端口

6.执行命令生产镜像

docker build -t xxxxx .