1. 编写Dockerfile

FROM node:8.11.3-slim

# system local config
RUN true \
    # debian china mirrors
    && sed -i 's/deb.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list \
    && sed -i 's/security.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list \
    # timezone to china
    && ln -sf /usr/share/zoneinfo/PRC /etc/localtime 

RUN apt-get update \
    && apt-get install -y \
    # node-sass 等编译依赖
    make gcc g++ python \
    # 命令行工具
    zsh curl wget vim git

# RUN wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | zsh || true
RUN sh -c "$(wget https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

RUN true \
    && npm config set registry https://registry.npm.taobao.org \
    && npm install webpack -g \  
    && npm install -g vue-cli 

RUN mkdir /workspace

WORKDIR /workspace

# 给这个目录执行权限，x是执行权限
RUN chmod +x /workspace

VOLUME /workspace

EXPOSE 8080

CMD ["zsh"]

2. 镜像构建和容器启动

镜像构建

docker build -t vueimage:v1 .

这里的-t等同于-tag，表示为镜像设置名字:标签。
这里的.是指构建上下文。

容器启动

docker run -itd -p 9090:8080 -v C:/test/docker/vue:/workspace --name vuedev --restart=always vueimage:v1

这里的C:/test/docker/vue是你的vue项目路径。

-i: 以交互模式运行容器，通常与 -t 同时使用；
-t: 为容器重新分配一个伪输入终端，通常与 -i 同时使用；
-it的意思是，用一个终端跟容器进行交互；

-p: 端口映射，格式为：主机(宿主)端口:容器端口
-d: 后台运行容器，并返回容器ID；
--name="": 为容器指定一个名称；
--restart=always   表示在容器退出时总是重启容器；

对应docker-compose的模板文件docker-compose.yml

version: '3'
services:
  dev:
    image: vueimage:v1
    ports:
     - "9091:8080"
    restart: always
    volumes: 
     - C:/test/docker/vue:/workspace
    stdin_open: true
    tty: true

执行命令docker-compose up -d即可

3. 进入容器启动vue开发环境

对项目进行依赖安装、启动开发服务器

docker exec -it vuedev zsh
# 进入容器后
npm install
npm run serve

宿主浏览器打开地址http://localhost:9090即可。

参考：
springjk/webdev
docker从入门到实践
https://docker-curriculum.biezhi.me/