用vscode连接基于docker的vue开发环境

一、项目根目录创建Dockerfile

node镜像采用alpine版本，体积比较小。git或其他需要的工具可自行安装。

FROM node:16.15.1-alpine
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories \
    && apk update \
    && apk add git make
WORKDIR /root/app

二、项目根目录创建docker-compose.yml

image参数和container_name参数可以不设置，但自动生成的名字会比较丑。

version: "3"
services:
  my-vue-app:
    build: .
    image: node16-cus:alpine
    container_name: my-vue-app
    # 使用vscode的remote-container无需设置ports,它将自动代理端口,可直接访问。
    # ports:
    #   - 3000:3000
    working_dir: /root/app
    volumes:
      - ".:/root/app"
    stdin_open: true   # 相当于-d 允许后台运行
    tty: true  # 相当于-i  允许交互