vue项目docker docker-compose 本地开发环境配置

配置Docker Compose用于在本地开发Vue项目是一个方便且高效的方法。Docker Compose允许您定义和管理多个容器组成的应用程序。

一、配置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

这将停止并删除所有相关容器和资源。