如果你需要使用特定版本的 HBuilderX 或者对构建过程有特殊要求,可以按照以下步骤自行构建镜像。
重要提醒:
在开始构建之前,一定要先使用本机 HBuilderX 分别创建 Vue2 和 Vue3 项目并成功进行一次真机调试,以便安装好相应插件。这是构建成功的关键步骤!
- Docker 环境
- 本机已安装 HBuilderX
- Git 工具
- 足够的磁盘空间(建议至少 5GB)
- 安装 HBuilderX:确保本机已正确安装 HBuilderX
- 创建测试项目:
# 在 HBuilderX 中创建一个 Vue2 项目
# 在 HBuilderX 中创建一个 Vue3 项目
- 真机调试:对两个项目分别进行一次真机调试,确保相关插件已安装
git clone --filter=blob:limit=4m https://github.com/hbuilderx-vanilla/docker.git
cd docker
使用 --filter=blob:limit=4m 参数可以减少下载大小,提高克隆速度。
根据你的操作系统选择对应的构建脚本:
# 进入构建目录
cd build
# 执行构建脚本
# 参数1: HBuilderX 版本号
# 参数2: HBuilderX plugins 文件夹路径
./core-build.sh 4.15.0 /Applications/HBuilderX.app/Contents/HBuilderX/plugins
# 进入构建目录
cd build
# 执行构建脚本
# 参数1: HBuilderX 版本号
# 参数2: HBuilderX plugins 文件夹路径
./core-build.ps1 4.15.0 "D:\HBuilderX\plugins"
版本说明:
以 HBuilderX 4.15.0 为例,请根据你实际安装的 HBuilderX 版本调整版本号。macOS 版本的构建脚本可能未及时更新,建议以 Windows 构建脚本为基准进行同步。
编辑 Dockerfile-China-Mainland 文件,将第 17 行的版本号替换为你构建的核心版本:
dockerfile
# 修改前
- ARG CORE_VERSION=4.15.0
# 修改为你的版本
+ ARG CORE_VERSION=4.16.0
# 进入测试目录
cd test
# 构建镜像
./build.sh
# 指定要挂载的工程父目录,如 /root/projects
./run.sh /root/projects
# 初始化容器依赖
docker exec -it hbuilder-vanilla sh -c "chmod +x /root/core-install.sh && /root/core-install.sh"
# 测试服务是否正常启动
curl --location 'http://127.0.0.1:13300'
# 测试构建功能(需要先在 /root/projects 下放置测试项目)
curl --location 'http://127.0.0.1:13300/build?project=test-app&vueVersion=3'
问题:构建过程中出现权限错误
解决方案:
# 确保脚本有执行权限
chmod +x build/core-build.sh
chmod +x test/build.sh
chmod +x test/run.sh
问题:构建的镜像无法正常工作
解决方案:
- 确认已在本机 HBuilderX 中创建过 Vue2 和 Vue3 项目
- 确认已进行过真机调试,相关插件已下载
- 重新执行核心提取步骤
问题:Docker 镜像构建时版本不匹配
解决方案:
- 检查
Dockerfile-China-Mainland 中的 CORE_VERSION 是否正确 - 确认提取的核心文件夹名称与版本号一致
问题:容器无法正常启动
解决方案:
# 查看容器日志
docker logs hbuilder-vanilla
# 检查端口占用
lsof -i :13300
# 重新启动容器
docker restart hbuilder-vanilla
修改 run.sh 脚本中的端口映射:
# 默认配置
docker run -d -p 13300:3000 ...
# 自定义端口
docker run -d -p 8080:3000 ...
为了保持构建缓存和配置,可以添加额外的数据卷:
docker run -d \
-v /path/to/projects:/projects \
-v /path/to/cache:/root/.cache \
-p 13300:3000 \
--name hbuilder-vanilla \
your-custom-image:latest
可以通过环境变量自定义构建行为:
docker run -d \
-e BUILD_TIMEOUT=300 \
-e LOG_LEVEL=debug \
-v /path/to/projects:/projects \
-p 13300:3000 \
--name hbuilder-vanilla \
your-custom-image:latest
如果你需要将自定义镜像发布到 Docker Hub 或私有仓库:
# 标记镜像
docker tag hbuilder-vanilla:latest your-username/hbuilder-vanilla:4.15.0
# 推送到 Docker Hub
docker push your-username/hbuilder-vanilla:4.15.0
# 推送到私有仓库
docker tag hbuilder-vanilla:latest registry.example.com/hbuilder-vanilla:4.15.0
docker push registry.example.com/hbuilder-vanilla:4.15.0
构建完成!
恭喜你成功构建了自定义版本的 HBuilderX Vanilla 镜像。现在你可以使用这个镜像来构建你的 uni-app 项目了。