一、配置Docker Compose文件,用于在本地开发Vue项目
docker-compose.yaml
version: '3' services: # Vue应用容器 vue-app: build: context: . dockerfile: Dockerfile # 如果你的Vue项目有自定义的Dockerfile,替换为正确的文件名 container_name: vue-app ports: - "8080:8080" # 映射容器的8080端口到本地的8080端口 volumes: - .:/app # 将本地项目目录映射到容器的/app目录 command: npm run serve # 启动Vue项目的开发服务器
二、配置 Dockerfile
Dockerfile
# 使用官方的Node.js镜像作为基础镜像 FROM node:latest # 设置工作目录为/app WORKDIR /app # 复制package.json和package-lock.json(如果有)到容器中 COPY package*.json ./ # 安装项目依赖 RUN npm install # 复制所有文件到容器中 COPY . . # 启动开发服务器 CMD ["npm", "run", "serve"]
三、在终端中进入Vue项目的根目录,然后运行以下命令来启动本地开发环境
docker-compose up
这将会构建并启动容器:vue-app用于运行Vue应用的开发服务器。在这个配置中,Vue应用将在本地的8080端口运行。
您可以在浏览器中访问http://localhost:8080来查看运行中的Vue应用。
当您进行Vue项目的开发时,只需在本地修改代码,保存后即可看到实时的更新,而无需重新构建或刷新浏览器。
要停止容器并清理资源,只需在终端中按下Ctrl+C,然后运行以下命令:
bash
docker-compose down
这将停止并删除所有相关容器和资源。