在 macOS 用 Docker 搭建前端开发环境，核心是容器仅托管 Nginx 等服务并实时同步代码，本地完成编辑、热重载与调试；需先安装 Docker Desktop 并配置镜像加速、资源与文件共享；再通过 docker run 或 docker-compose 快速启动静态服务及 Mock 后端。
在 macos 上用 docker 搭建前端开发环境，关键不是把整个开发流程塞进容器，而是让 docker 做它最擅长的事：隔离运行时、复现真实部署行为、一键启停验证。本地编辑、热重载、调试仍由 macos 原生完成，容器只托管 nginx（或 php-fpm + nginx）等服务，通过 volume 实时同步代码，改保存即生效。
快速安装并验证 Docker Desktop
这是所有操作的前提，务必确认环境干净可靠：
- 去 docker.com/download 下载对应芯片版本（Apple Silicon 选 arm64，Intel 选 amd64），双击 .dmg 拖入 Applications
- 首次启动需授权“完全磁盘访问”和“辅助功能”，按提示输入密码即可
- 终端执行：
docker --version→ 确认输出类似 Docker version 24.0.7docker run hello-world→ 看到 Hello from Docker! 即成功
资源与镜像加速配置（国内用户必做）
默认设置容易卡顿或拉镜像极慢，这几项调完才真正好用：
- 顶部鲸鱼图标 → Preferences → Resources：内存设为 4GB 起（多服务建议 6GB），CPU 给 4 核
-
Preferences → Docker Engine：在 JSON 配置框中加入国内镜像加速地址，例如：
{"registry-mirrors": ["https://docker.mirrors.ustc.edu.cn"]}
点 Apply & Restart -
Preferences → File Sharing：添加常用项目目录（如
~/Projects），否则容器读不到你写的代码
三步启动一个可调试的静态服务（以 React/Vue 为例）
不写 Dockerfile，不装 Node，一条命令跑起生产构建产物，并支持实时刷新：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 先在本地完成构建：
npm run build（Vite 默认输出dist/，CRA 是build/） - 启动 Nginx 容器并挂载 dist 目录：
docker run -d -p 8080:80 -v $(pwd)/dist:/usr/share/nginx/html --name fe-dev nginx:alpine - 浏览器打开
http://localhost:8080，修改源码 → 重新npm run build→ 刷新页面即见效果
（如需 history 路由支持，在挂载自定义nginx.conf时加try_files $uri $uri/ /index.html;）
用 docker-compose 管理多服务（前端+Mock+后端 API）
避免手动启停多个容器，一个 docker-compose.yml 统一编排：
立即学习“前端免费学习笔记（深入）”；
- 在项目根目录新建
docker-compose.yml，示例含前端静态服务与 Mock 服务器：
services:
web:
image: nginx:alpine
ports: ["8080:80"]
volumes:
- ./dist:/usr/share/nginx/html
- ./nginx.conf:/etc/nginx/conf.d/default.conf
mock:
image: node:20-alpine
ports: ["3001:3001"]
volumes:
- ./mock-server:/app
working_dir: /app
command: npm start
- 启动只需：
docker-compose up -d
停止：docker-compose down - Mock 服务跑在
localhost:3001，前端 Nginx 可通过proxy_pass http://mock:3001转发请求（需在nginx.conf中配置）
