Home Original page

GitHub - ankewk/docker-fronted

这是一个包含Vue、React、Angular、UniApp的前端开发Docker环境，支持文件热加载功能和多版本Node.js选择。

🚀 快速开始

1. 启动开发环境

标准版本（Node.js 18）

# Windows (批处理文件)
scripts\start-dev.bat

# Windows (PowerShell - 推荐，解决中文乱码)
.\scripts\start-dev.ps1

# Linux/Mac
./scripts/start-dev.sh

# 或者手动启动
docker-compose up -d

多版本Node.js版本

# Windows (批处理文件)
scripts\start-multi-node.bat

# Windows (PowerShell - 推荐，解决中文乱码)
.\scripts\start-multi-node.ps1

# Linux/Mac
./scripts/start-multi-node.sh

# 或者手动启动
docker-compose -f docker-compose.multi-node.yml up -d

2. 创建项目

# Windows (批处理文件)
scripts\create-projects.bat

# Windows (PowerShell - 推荐，解决中文乱码)
.\scripts\create-projects.ps1

# Linux/Mac
./scripts/create-projects.sh

3. 启动项目（支持热加载）

# Windows (批处理文件)
scripts\run-projects.bat vue
scripts\run-projects.bat react
scripts\run-projects.bat angular

# Windows (PowerShell - 推荐，解决中文乱码)
.\scripts\run-projects.ps1 vue
.\scripts\run-projects.ps1 react
.\scripts\run-projects.ps1 angular
.\scripts\run-projects.ps1 uniapp

# Linux/Mac
./scripts/run-projects.sh vue
./scripts/run-projects.sh react
./scripts/run-projects.sh angular
./scripts/run-projects.sh uniapp

📋 可用端口

🔥 热加载功能

本环境已配置完整的文件热加载功能：

环境变量配置

  • CHOKIDAR_USEPOLLING=true - 启用文件轮询
  • WATCHPACK_POLLING=true - 启用Webpack轮询
  • FAST_REFRESH=true - 启用React快速刷新

各框架热加载配置

Vue项目

  • 使用Vue CLI的热重载功能
  • 配置了--host 0.0.0.0确保容器内可访问
  • 文件变化自动刷新浏览器

React项目

  • 启用WATCHPACK_POLLING确保文件变化检测
  • 支持React Fast Refresh
  • 自动热替换组件

Angular项目

  • 使用ng serve --poll 1000启用轮询
  • 配置了--host 0.0.0.0确保容器内可访问
  • 支持Angular的热重载

Vite项目

  • 使用Vite的HMR（Hot Module Replacement）
  • 配置了usePolling: true确保文件变化检测
  • 最快的热重载体验

UniApp项目

  • 使用UniApp的H5开发模式
  • 支持跨平台开发（H5、小程序、App）
  • 基于Vue.js的语法，易于上手

📁 项目结构

docker-fronted/
├── vue-projects/          # Vue项目目录
│   ├── vue-demo/         # Vue CLI项目
│   └── vite-vue-demo/    # Vite Vue项目
├── react-projects/        # React项目目录
│   ├── react-demo/       # Create React App项目
│   └── vite-react-demo/  # Vite React项目
├── angular-projects/      # Angular项目目录
│   └── angular-demo/     # Angular CLI项目
├── uniapp-projects/      # UniApp项目目录
│   └── uniapp-demo/      # UniApp项目
├── scripts/              # 脚本文件
│   ├── start-dev.*       # 标准环境启动脚本
│   ├── start-multi-node.* # 多版本Node.js启动脚本
│   ├── node-version-manager.* # Node.js版本管理脚本
│   ├── create-projects.* # 项目创建脚本
│   └── run-projects.*    # 项目运行脚本
├── config/               # 配置文件
├── Dockerfile           # 标准环境Docker镜像配置
├── Dockerfile.multi-node # 多版本Node.js Docker镜像配置
├── docker-compose.yml   # 标准环境Docker Compose配置
├── docker-compose.multi-node.yml # 多版本Node.js Docker Compose配置
└── README.md           # 说明文档

🛠️ 常用命令

Docker操作

# 启动环境
docker-compose up -d

# 停止环境
docker-compose down

# 重新构建
docker-compose build

# 进入容器
docker-compose exec frontend-dev sh

Node.js版本管理（多版本环境）

# 列出已安装的Node.js版本
.\scripts\node-version-manager.ps1 list

# 切换到指定版本
.\scripts\node-version-manager.ps1 use 18.19.0
.\scripts\node-version-manager.ps1 use 20.11.0

# 安装新版本
.\scripts\node-version-manager.ps1 install 22.0.0

# 查看当前版本
.\scripts\node-version-manager.ps1 current

项目操作

# 进入容器后，可以执行以下命令

# Vue项目
cd /app/vue-projects/vue-demo
npm run serve

# React项目
cd /app/react-projects/react-demo
npm start

# Angular项目
cd /app/angular-projects/angular-demo
ng serve --host 0.0.0.0

# Vite项目
cd /app/vue-projects/vite-vue-demo
npm run dev

# UniApp项目
cd /app/uniapp-projects/uniapp-demo
npm run dev:h5

🔧 开发工具

标准版本（Node.js 18）

容器内已安装的开发工具：

  • Node.js 18 - JavaScript运行时
  • Vue CLI - Vue项目脚手架
  • Create React App - React项目脚手架
  • Angular CLI - Angular项目脚手架
  • UniApp CLI - 跨平台应用开发框架
  • Vite - 现代构建工具
  • TypeScript - 类型安全的JavaScript
  • ESLint - 代码检查工具
  • Prettier - 代码格式化工具
  • Yarn - 包管理器
  • pnpm - 快速包管理器

多版本Node.js环境

  • Node.js版本管理工具 (n) - 支持多版本切换
  • 预装Node.js版本：
    • Node.js 16.20.2 (LTS)
    • Node.js 18.19.0 (LTS) - 默认版本
    • Node.js 20.11.0 (LTS)
    • Node.js 21.7.0 (Current)
    • Node.js latest (最新版本)
  • 支持动态安装 - 可随时安装新的Node.js版本
  • 版本切换 - 支持快速切换不同Node.js版本

📝 注意事项

  1. 文件权限: 确保Docker有足够的权限访问项目目录
  2. 端口冲突: 如果端口被占用，请修改docker-compose.yml中的端口映射
  3. 热加载延迟: 在Windows上可能需要1-2秒才能检测到文件变化
  4. 内存使用: 同时运行多个项目会消耗较多内存

🔧 中文乱码解决方案

Windows批处理文件乱码

如果在Windows上运行.bat文件时出现中文乱码，请使用PowerShell脚本：

# 使用PowerShell脚本（推荐）
.\scripts\start-dev.ps1
.\scripts\create-projects.ps1
.\scripts\run-projects.ps1 vue

解决方案说明

  1. 批处理文件: 已添加chcp 65001设置UTF-8编码
  2. PowerShell脚本: 使用[Console]::OutputEncoding = [System.Text.Encoding]::UTF8设置编码
  3. 颜色输出: PowerShell脚本支持彩色输出，更易读

如果仍有乱码

# 在PowerShell中设置编码
[Console]::OutputEncoding = [System.Text.Encoding]::UTF8
$OutputEncoding = [System.Text.Encoding]::UTF8

# 然后运行脚本
.\scripts\start-dev.ps1

🐛 故障排除

热加载不工作

# 检查环境变量
docker-compose exec frontend-dev env | grep -E "(CHOKIDAR|WATCHPACK|FAST_REFRESH)"

# 重启容器
docker-compose restart

端口被占用

# 查看端口使用情况
netstat -ano | findstr :3000

# 修改docker-compose.yml中的端口映射

项目无法访问

# 检查容器状态
docker-compose ps

# 查看容器日志
docker-compose logs frontend-dev

�� 许可证

MIT License