利用dockerfile构建vue和element-ui开发环境容器

1.创建Dockerfile

在一个目录之下创建Dockerfile

FROM node

# 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 npm config set registry https://registry.npm.taobao.org
RUN npm install webpack -g
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN npm install -g @vue/cli
RUN mkdir /workspace


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

ENTRYPOINT  vue create vue-demo --registry https://registry.npmmirror.com --default \
          &&  cd /workspace/vue-demo \
          &&  cnpm install \
          &&  cnpm i element-ui -S \
          &&  cnpm install babel-plugin-component -D \
          &&  cnpm run serve

2.构建容器镜像
利用docker build构建镜像

docker build -f Dockerfile -t myvue:1.0 . --force-rm 

3.运行该容器镜像

docker run -itd -p 8080:8080 -v /vue:/workspace --name myvue --restart=always myvue:1.0