weyenriah/portfolio

portfolio Docker镜像文档

镜像概述

portfolio是一个专为个人作品集网站设计的Docker镜像，基于Vue.js框架构建，提供完整的项目开发与部署工具链。该镜像集成了依赖管理、开发环境热重载、生产环境优化构建、自动化测试及代码质量检查等功能，旨在帮助开发者快速搭建、维护和部署个人作品展示网站。

核心功能与特性

• 项目依赖管理：通过npm install命令一键安装项目所需的所有依赖包，确保开发环境一致性
• 开发热重载支持：提供npm run serve命令启动开发服务器，支持代码修改实时预览，提升开发效率
• 生产环境优化构建：使用npm run build命令对代码进行压缩、混淆和优化，生成可直接部署的生产环境静态文件
• 自动化测试：集成npm run test命令执行项目测试用例，保障代码质量和功能稳定性
• 代码质量检查：通过npm run lint命令进行代码风格检查和自动修复，遵循行业编码规范
• 灵活配置扩展：支持基于Vue CLI进行自定义配置，可根据需求调整构建流程、环境变量等参数

使用场景与适用范围

• 个人开发者部署在线作品集网站，展示项目经验和技能
• 前端开发学习者实践Vue.js项目构建与部署流程
• 需要快速迭代作品内容的设计师或创意工作者
• 小型团队内部展示项目进度或成果的临时站点

使用方法与配置说明

前提条件

• 已安装Docker Engine（推荐版本20.10及以上）
• 本地环境具备网络连接（用于拉取镜像及安装npm依赖）

获取镜像

bash
# 假设镜像托管于Docker Hub，实际地址需替换为具体仓库路径
docker pull [镜像仓库地址]/portfolio:latest

基本使用流程

1. 启动开发环境

bash
docker run -it --rm \
  -p 8080:8080 \
  -v $(pwd):/app \
  [镜像仓库地址]/portfolio \
  npm run serve

参数说明：

• -it：交互式终端模式，支持命令行输入
• --rm：容器退出后自动删除，避免残留临时文件
• -p 8080:8080：端口映射，将容器内8080端口（开发服务器默认端口）映射到主机8080端口
• -v $(pwd):/app：目录挂载，将主机当前目录挂载到容器内/app目录，实现代码实时同步

2. 构建生产环境文件

bash
docker run -it --rm \
  -v $(pwd):/app \
  [镜像仓库地址]/portfolio \
  npm run build

构建完成后，生产环境静态文件将生成在容器内/app/dist目录，通过挂载目录可同步到主机本地。

3. 运行自动化测试

bash
docker run -it --rm \
  -v $(pwd):/app \
  [镜像仓库地址]/portfolio \
  npm run test

4. 代码风格检查与修复

bash
docker run -it --rm \
  -v $(pwd):/app \
  [镜像仓库地址]/portfolio \
  npm run lint

自定义配置

项目配置可通过Vue CLI进行扩展，详细配置方法请参考Vue CLI配置参考。常见配置场景包括：

• 修改开发服务器端口、代理设置
• 配置环境变量区分开发/测试/生产环境
• 自定义webpack构建规则
• 添加第三方插件或loader

注意事项

• 首次运行npm install时需确保网络通畅，依赖包下载可能需要几分钟时间
• 生产环境构建文件建议配合Nginx等Web服务器部署，以获得更好的性能和安全性
• 挂载本地目录时，需确保主机目录有适当的读写权限，避免容器内操作失败
• 如需持久化保存依赖包，可将node_modules目录单独挂载为数据卷