montyanderson/breakpack

breakpack Docker镜像文档

镜像概述

breakpack Docker镜像是为breakpack项目提供的开发与构建环境，基于Node.js运行时，集成了项目依赖管理、开发热重载及生产构建功能，兼容Vue CLI配置标准，可简化项目的环境配置与部署流程。

核心功能与特性

• 依赖管理：支持通过npm install命令安装项目所需依赖包
• 开发环境：提供热重载编译功能（npm run serve），实现代码修改实时生效
• 生产构建：支持生产环境代码压缩与优化（npm run build），生成可部署的静态资源
• 配置兼容：遵循Vue CLI配置规范，可通过官方配置文档自定义项目设置

使用场景

• 前端开发人员进行breakpack项目的本地开发与调试
• 持续集成/持续部署(CI/CD)流程中自动化执行项目构建
• 需要隔离开发环境依赖的团队协作场景

使用方法

前提条件

• 已安装Docker引擎
• 本地已获取breakpack项目源代码

基本操作步骤

1. 安装项目依赖

将本地项目目录挂载到容器中，执行依赖安装命令：

bash
docker run -v $(pwd):/app -w /app breakpack npm install

2. 启动开发环境（热重载模式）

启动开发服务器并映射端口，实现本地访问与热重载：

bash
docker run -v $(pwd):/app -w /app -p 8080:8080 breakpack npm run serve

访问http://localhost:8080即可查看项目运行效果，代码修改后将自动触发页面更新。

3. 构建生产版本

执行生产构建命令，生成优化后的静态文件至项目dist目录：

bash
docker run -v $(pwd):/app -w /app breakpack npm run build

docker-compose配置示例

创建docker-compose.yml文件简化操作：

yaml
version: '3'
services:
  dev:
    image: breakpack
    volumes:
      - ./:/app
    working_dir: /app
    ports:
      - "8080:8080"
    command: npm run serve

  build:
    image: breakpack
    volumes:
      - ./:/app
    working_dir: /app
    command: npm run build

• 启动开发环境：docker-compose up dev
• 执行生产构建：docker-compose run build

配置说明

• 卷挂载：通过-v $(pwd):/app将本地项目目录映射到容器/app目录，实现代码实时同步
• 工作目录：-w /app指定容器内的工作目录为/app，确保命令在项目根目录执行
• 端口映射：-p 8080:8080将容器内开发服务器端口映射到本地，默认端口可通过Vue CLI配置修改
• 自定义配置：项目配置可参考Vue CLI配置文档进行扩展，支持webpack配置、环境变量等自定义设置