小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> vue项目docker docker-compose 本地开发环境配置

vue项目docker 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

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

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了