ZXManage 项目打包模块使用文档

一、功能概述

项目打包模块提供环境化打包、打包日志追踪、历史记录管理、一键上传服务器等全流程能力，支持多环境（生产/预发/测试）打包与自动化部署，让项目交付更高效、可追溯。

图1：项目打包模块主界面

二、界面布局与核心区域

1. 左侧区域：打包操作与日历

• 日历面板：按日期筛选打包记录，绿色标记表示该日期存在打包记录，蓝色圆点标记为当前选中日期。
• 打包操作区：包含「安装依赖」和各环境打包入口（生产/预发/测试），点击右侧绿色按钮执行对应操作。

2. 右侧区域：打包记录与部署

• 打包记录列表：展示选中日期的所有打包记录，包含时间、环境、产物路径等信息。
• 记录操作区：支持删除记录、一键上传至服务器，可填写部署备注。
• 服务器信息区：展示所选上传服务器的地址与目标路径。

三、打包操作流程

1. 安装依赖

点击「安装依赖」右侧的绿色按钮，执行项目依赖安装：

• 等价命令：npm install（或 yarn install / pnpm install，根据项目配置自动识别）
• 适用场景：首次打包、新增依赖后、拉取代码后，确保依赖完整。
• 执行反馈：弹出进度窗口，实时显示安装日志。

💡 提示：若依赖安装失败，可检查网络连接或 package.json 配置是否正确。

2. 环境打包

点击对应环境（生产/预发/测试）右侧的绿色按钮，启动打包流程：

1. 执行打包：系统调用已配置的打包命令（在「配置」→「打包命令配置」中定义），弹出打包进度窗口，实时输出构建日志。
   • 示例日志：Building for production... 表示正在生产环境构建。
2. 产物生成：打包完成后，自动生成 .zip 压缩包，保存至指定目录（如 E:\test\PROJECT_MANAGE\打包记录\测试项目\2026-03-23\1774237636_time_生产.zip）。
3. 记录归档：打包记录自动归档至日历对应日期，可在右侧列表查看。

⚠️ 注意：打包前需确保已在「配置」模块完成打包命令与本地服务配置，否则打包会失败。

3. 打包进度查看

打包过程中会弹出「打包进度」窗口：

• 实时展示构建日志（如依赖解析、编译进度、资源压缩等）。
• 可查看错误信息，便于排查打包失败原因。
• 打包完成后窗口自动关闭，或可手动关闭。

图2：打包进度界面

四、打包记录管理

1. 查看历史记录

• 在日历面板选择目标日期，右侧列表将展示该日期下的所有打包记录。
• 每条记录包含：打包时间、环境标识、产物本地路径。
• 点击路径旁的文件夹图标，可直接打开产物所在目录。

2. 删除打包记录

• 勾选需要删除的打包记录。
• 点击「删除所选打包记录」按钮，确认后删除记录与对应产物文件。

⚠️ 警告：删除操作不可逆，请谨慎清理历史记录。

3. 一键上传服务器

①. 勾选需要部署的打包记录。

②. 在「上传服务器」下拉框中选择目标服务器配置（在「配置」→「服务器上传配置」中预设）。

③. （可选）填写「提交备注」，记录本次部署说明。

④. 点击「提交服务器」，执行文件上传流程： - 系统自动将产物压缩包上传至服务器指定目录。 - 上传进度与结果将实时反馈。

✅ 最佳实践：建议为不同环境配置独立的服务器地址，避免生产/测试环境混淆。

图3：打包记录管理界面

五、完整操作示例

场景：生产环境打包并部署

1. 点击「安装依赖」，完成依赖更新。
2. 点击「生产」右侧打包按钮，等待构建完成。
3. 在日历中选择当天日期，查看新生成的打包记录。
4. 勾选该记录，选择目标生产服务器，填写备注：修复登录bug。
5. 点击「提交服务器」，完成部署。

六、 一键打包功能说明

1、功能入口

顶部操作栏 一键打包 入口，点击后进入打包流程向导界面。

图4：一键打包功能界面

2、流程步骤

①. 选择项目 - 展示可打包项目列表（如“测试项目”）。 - 每个项目可勾选对应的打包环境如：生产、预发、测试（均是项目已配置的打包环境）。 - 完成选择后点击「下一步」进入下一环节。

②. 项目打包 - 系统将根据上一步选择的项目及环境，依次执行打包任务。 - 实时展示打包进度与结果。

③. 推送服务器（可选项） - 可选择将打包产物推送至对应服务器环境。 - 若无需推送，可直接跳过此步骤。

④. 推送服务器结果（可选项） - 若执行了推送操作，将展示所有服务器的推送结果（成功/失败及详情）。

3、操作示例

• 点击顶部操作栏 一键打包。
• 勾选「测试项目」，并选择环境（如「测试」）。
• 点击「下一步」，等待系统完成项目打包。 -（可选）选择推送目标服务器，确认后执行推送。
• 查看最终打包/推送结果。

七、常见问题与 Tips

💡 Tips：

1. 依赖缓存：若依赖安装缓慢，可使用淘宝镜像或清理 npm 缓存。
2. 产物清理：定期清理旧打包记录，释放磁盘空间。
3. 环境区分：严格区分生产/预发/测试环境打包，避免误部署。
4. 日志排查：打包失败时，优先查看「打包进度」窗口的错误日志，定位问题根源。

⚠️ 警告：

• 上传服务器前务必确认服务器配置正确，避免覆盖线上文件。
• 打包产物路径请勿手动修改，否则会导致上传功能异常。

七、与其他模块关联

• 配置模块：需提前配置打包命令、服务器上传信息。
• Git 模块：建议打包前提交代码，确保打包版本与代码版本一致。
• 本地服务模块：可启动本地服务预览打包产物效果。