在Docker上搭建vue-cli开发环境

Docker desktop的EDGE版本支持将宿主机搭建在WLS2上，这样可以在系统中少安装一部虚拟机，通过nodejs的容器就可以简单的搭建好vue的开发环境，而且和在原生linux上一致

Docker上的工作

Dockerfile

首先需要创建一个镜像，这里我们使用的Dokcerfile如下

# nodejs基础镜像，这里可以使用其它tag，alpine 镜像比较小，适合用在虚拟机上
FROM node:lts-alpine AS runtime

# 导出8000和8080端口分别是vue ui的web管理页面端口以及serve端口
EXPOSE 8000
EXPOSE 8080
WORKDIR /src

# 如果使用npm则改成 npm install -g @vue/cli
RUN yarn global add @vue/cli
# 这里因为在vue ui中默认hosts是localhost，所以不能通过外部访问，这里需要将host修改为0.0.0.0，才能外部访问
CMD ["vue", "ui", "--host", "0.0.0.0"]

这里需要注意vue ui以及serve的端口默认的host都是不能通过外部访问的需要修改配置文件,vue.config.js需要添加devServer将host设置为0.0.0.0，vue ui部分可以使用–host参数设置

module.exports = {
publicPath: '/',

devServer:{
    host: '0.0.0.0',
    port: 8080,
},
productionSourceMap: false,
lintOnSave: undefined
}

Docker-Compose.yml

version: '3'

services:
    vue:
    # dockerfile文件位置
    build: ./
    image: vue-cli
    ports:
        - "8080:8080"
        - "8000:8000"
    # 将工作目录挂载到容器内
    volumes:
        - ./src:/src
    environment:
    # 环境变量设置参考官方文档
    # https://cli.vuejs.org/guide/mode-and-env.html#modes
    # vue-cli-service serve 用到的
        - NODE_ENV=development
        # 热更新设置
        - CHOKIDAR_USEPOLLING=true
        - CHOKIDAR_INTERVAL=100