PakePlus 自定义打包实战将 dist 同步到 GitHub 分支并触发多端编译发布【免费下载链接】PakePlusTurn any webpage/HTML/Vue/React and so on into desktop and mobile app under 5M with easy in few minutes. 轻松将任意网站/HTML/Vue/React等项目构建为轻量级(小于5M)多端桌面应用和手机应用仅需几分钟. https://ppofficial.netlify.app项目地址: https://gitcode.com/GitHub_Trending/pa/PakePlusPakePlus 的在线打包受 GitHub API 限制对上传文件的大小和数量有约束对于dist目录庞大、文件众多的前端项目官方提供了自定义打包Custom Build这一高级玩法把项目分支拉下来直接替换构建产物再借助 fork 仓库自带的 GitHub Actions 工作流一键编译出桌面端与移动端安装包。读完本文你将完整掌握从建项目、同步dist、修改 ppconfig.json 配置到触发工作流并下载发布的自定义打包全流程。一、自定义打包的定位与适用场景自定义打包是 PakePlus 官方文档 Custom Build中文对照版见 docs/zh/guide/custompack.md描述的高级功能面向两类典型开发者需要调试前端项目的程序员希望在自己的产物上逐版本迭代、快速验证打包效果构建产物超重的项目dist目录特别大、文件特别多超过了在线打包接口受 GitHub API 限制对文件大小与数量的约束。相比在线打包自定义打包官方明确列出的优势有五点优势项说明不限制项目数量可以创建任意多个项目分支不限制打包频率想打几次打几次不受在线额度约束不限制文件数量dist里有多少文件都可以推上去文件大小放宽到 25M单文件大小限制从在线模式放宽更多自定义打包选项直接改配置文件控制图标、名称、行为开关等本质上自定义打包把前端产物托管和编译发布两件事拆开了产物通过 Git 分支管理每个项目一个分支编译发布则完全交给 fork 仓库里预置的 CI 工作流完成。二、前置条件token 验证与仓库 fork 机制在开始之前需要理解 PakePlus 的仓库分派机制——这是自定义打包能成立的前提你在 PakePlus 网站填写并验证 GitHub token 后系统会把对应的模板仓库自动 fork 到你的 GitHub 账号下桌面端fork 的是PakePlus仓库即本文分析的这份仓库移动端fork 的是PakePlus-Android或PakePlus-iOS仓库。从源仓库的 tauri.conf.json、tauri.windows.conf.json、tauri.linux.conf.json、tauri.macos.conf.json 多份平台配置以及 .github/workflows/build.yml 可以看出fork 出去的PakePlus仓库本身就是一个带完整 CI 的 Tauri 工程壳你只需要替换里面的前端产物和配置编译逻辑已由仓库预置。因此编译桌面端就 clonePakePlus编译移动端则 clonePakePlus-Android/PakePlus-iOS这一点在后续每一步都至关重要。三、完整操作步骤以官方文档中的示例项目deepseek为例整个流程分五步。步骤 1在 PakePlus 上创建项目先登录 PakePlus 创建一个项目项目名称例如deepseek。项目名会直接映射为你 fork 仓库中的分支名——后面所有操作都围绕这个分支进行。步骤 2clone 你的 PakePlus 仓库到本地在你的 GitHub 账号下找到被 fork 出来的 PakePlus 仓库或 PakePlus-Android / PakePlus-iOSclone 到本地git clone https://github.com/你的用户名/PakePlus.git注意这里 clone 的是fork 到你账号下的仓库而不是源仓库。只有 fork 到自己账号下的仓库Actions 的 release 权限contents: write才能产出你可见的 Release 产物。步骤 3切换到项目分支同步 dist 与配置使用 git 命令拉取仓库的所有分支其中一定有与项目同名的分支git fetch --all git checkout deepseek切到deepseek分支后做三件事同步构建产物把你本地前端项目的dist文件夹内容复制到该分支的src目录下然后提交。可选更换应用图标把项目根目录的 app-icon.png 替换成你自己的图标并提交。三个硬性要求——必须是 PNG 格式、文件名必须叫app-icon.png、尺寸必须是 1024×1024 像素仓库根目录自带的 app-icon.png 即为 1024×1024 的参照样例。图标会被构建流程加工成各平台格式例如 src-tauri/icons/icon.icns、src-tauri/icons/icon.ico 及整套 Android 各密度 mipmap 图标见 src-tauri/icons/android/。修改应用配置编辑项目根目录的 scripts/ppconfig.json。桌面端改desktop字段Android 改android字段iOS 改ios字段。步骤 4推送分支并触发编译提交并推送该分支后到 GitHub 仓库的 Actions 页面手动触发工作流git add . git commit -m update dist and config git push origin deepseek触发时的两个关键点分支一定要选择deepseek即你的项目分支然后点击 Run workflow 等待编译完成。步骤 5在 PakePlus 的 release 页面下载软件发布完成后回到 PakePlus 站点对应项目的 release 页面即可下载你的安装包桌面端为.dmgmacOS/.exeWindows等格式移动端为.apk/.ipa。四、ppconfig.json 核心字段详解scripts/ppconfig.json 是自定义打包中最重要的配置文件。官方文档列出的核心字段如下以桌面端desktop字段为准{ name: 英文名称, showName: 显示名称, version: 版本号, id: com.唯一id.app, desc: 项目描述, webUrl: index.html, iconPath: ../app-icon.png, inputPath: ../app-icon.png, tempPath: ./processed-image.png, icnsPath: ../src-tauri/icons/icon.icns, pubBody: 发布内容描述, isHtml: true, single: true, state: true, injectJq: false, tauriApi: false, debug: false }结合仓库中真实的 scripts/ppconfig.json 内容各字段含义与作用如下字段作用仓库中的默认/示例值name应用的英文名称内部标识名示例为PakePlusshowName显示名称用户在系统中看到的名字示例为xiaoshenversion应用版本号随版本递增示例为0.0.2id唯一应用标识遵循反向域名格式示例为com.xiaoshen.appdesc项目/应用描述见 scripts/ppconfig.json 中desc字段webUrl应用加载的入口本地打包指向index.html在线模式为网址示例为https://juejin.cn/iconPath图标源文件路径相对scripts目录../app-icon.pnginputPath图标处理流程的输入路径../app-icon.pngtempPath图标处理过程中的临时输出./processed-image.pngicnsPathmacOS 图标成品输出位置../src-tauri/icons/icon.icnspubBody发布说明会写入 Release 描述见配置文件isHtml是否按本地 HTML 项目打包false在线模式/truedist 本地项目single是否单例模式为true时重复启动会聚焦已有实例而不是开新窗口truestate是否保持窗口状态位置、尺寸等到下次启动trueinjectJq是否向页面注入 jQuery 兼容层falsetauriApi是否向页面暴露 Tauri API配合前端调用原生能力falsedebug是否开启调试模式false几个字段值得结合实现多说两句iconPath→tempPath→icnsPath的三路径设计从源码结构看图标处理是一条读入 → 加工 → 写出的流水线scripts/ppconfig.json 的desktop段同时声明了源路径、临时路径和 macOS icns 成品路径构建时据此把一张 1024×1024 的app-icon.png转成各平台所需格式这也解释了为什么图标文件名和尺寸是硬性要求——流水线按固定路径找文件。tauriApi与injectJqPakePlus 的 Tauri 壳见 src-tauri/src/lib.rs注册了preview_from_config、open_url、open_devtools、start_server、compress_folder等命令并挂载了 fs、dialog、http、updater、store 等 Tauri 插件。开启tauriApi后你的页面 JS 即可通过 Tauri API 调用这些能力injectJq则解决老网站依赖 jQuery 全局对象的问题。移动端字段android段额外包含input/output/copyTo/androidResDir等图标与资源拷贝路径如copyTo: ./app/src/main/resios段则相对精简name、showName、version、webUrl、id、icon、desc、pubBody、isHtml、debug编译 Android/iOS 时以 scripts/ppconfig.json 中对应字段为准修改。五、编译是怎么被触发的Actions 工作流原理自定义打包的魔力来自 fork 仓库预置的 .github/workflows/build.yml读懂它能帮你正确选择编译选项手动触发workflow_dispatch工作流由workflow_dispatch事件驱动这正是文档中到 GitHub Actions 点 Run workflow的底层机制。触发时提供六个布尔开关build_macos_aarch64、build_macos_x86_64、build_linux_x86_64、build_linux_aarch64、build_windows_x86_64、build_windows_aarch64默认全部为true——按需关掉不需要的平台可以显著缩短编译时间。矩阵构建strategy matrix每个启用平台对应一个独立 jobfail-fast: false保证单个平台失败不影响其他平台继续编译timeout-minutes: 60限制了单 job 上限。环境准备工作流使用 pnpm 10 安装前端依赖、Node 22.14.0、Rust stable 工具链及对应 target随后走 Tauri 构建。权限与产物permissions: contents: write让工作流能把构建产物挂到 Release 上这正对应文档最后一步到 release 页面下载你的软件同时pages: write权限支持站点页面的发布。从 src-tauri/Cargo.toml 和 src-tauri/src/lib.rs 可以推断编译时前端产物你放入src目录的dist内容与 Tauri 壳一起被打包Rust 侧负责窗口、菜单、系统能力与更新逻辑前端完全按你推上去的版本运行。六、注意事项与限制分支名 项目名整个流程以项目分支为线索git fetch --all后找不到项目分支多半是项目尚未在 PakePlus 上成功创建触发 Actions 时选错分支会导致编译的不是你的产物。图标三要素缺一不可PNG 格式、文件名app-icon.png、1024×1024任一不满足都会导致图标生成失败。平台与仓库一一对应桌面端改PakePlusfork 并动desktop字段Android 用PakePlus-Android与android字段iOS 用PakePlus-iOS与ios字段跨仓库改动不会生效。文件限制只是放宽而非取消自定义打包将单文件大小限制放宽到 25M但并非无上限极端超大的单个产物仍需自行拆分或压缩。配置生效以推送为准所有修改dist 内容、图标、ppconfig.json都必须 commit 并 push 到项目分支本地改动不会被 Actions 感知。pubBody会影响发布说明Release 的描述文本来自pubBody字段正式发版前建议填写有意义的版本说明而非模板占位文案。七、小结PakePlus 的自定义打包把前端产物和编译流水线解耦产物走 Git 分支管理编译走 fork 仓库预置的 GitHub Actions 工作流配置全部收敛到 scripts/ppconfig.json 一个文件中。对于产物大、文件多、需要频繁迭代的前端项目这条路径绕开了在线打包的 API 限制并且让图标、应用名、版本号、单例、状态保持、jQuery 注入、Tauri API 等选项全部可控——掌握建项目 → clone fork 仓库 → 切分支同步 dist → 改配置 → 触发工作流 → 下载 Release这五步即可完成一次完整的自定义打包发布。【免费下载链接】PakePlusTurn any webpage/HTML/Vue/React and so on into desktop and mobile app under 5M with easy in few minutes. 轻松将任意网站/HTML/Vue/React等项目构建为轻量级(小于5M)多端桌面应用和手机应用仅需几分钟. https://ppofficial.netlify.app项目地址: https://gitcode.com/GitHub_Trending/pa/PakePlus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/14 8:25:16 · 阅读 1.2k PakePlus 自定义打包实战：将 dist 同步到 GitHub 分支并触发多端编译发布
PakePlus 自定义打包实战将 dist 同步到 GitHub 分支并触发多端编译发布【免费下载链接】PakePlusTurn any webpage/HTML/Vue/React and so on into desktop and mobile app under 5M with easy in few minutes. 轻松将任意网站/HTML/Vue/React等项目构建为轻量级(小于5M)多端桌面应用和手机应用仅需几分钟. https://ppofficial.netlify.app项目地址: https://gitcode.com/GitHub_Trending/pa/PakePlusPakePlus 的在线打包受 GitHub API 限制对上传文件的大小和数量有约束对于dist目录庞大、文件众多的前端项目官方提供了自定义打包Custom Build这一高级玩法把项目分支拉下来直接替换构建产物再借助 fork 仓库自带的 GitHub Actions 工作流一键编译出桌面端与移动端安装包。读完本文你将完整掌握从建项目、同步dist、修改 ppconfig.json 配置到触发工作流并下载发布的自定义打包全流程。一、自定义打包的定位与适用场景自定义打包是 PakePlus 官方文档 Custom Build中文对照版见 docs/zh/guide/custompack.md描述的高级功能面向两类典型开发者需要调试前端项目的程序员希望在自己的产物上逐版本迭代、快速验证打包效果构建产物超重的项目dist目录特别大、文件特别多超过了在线打包接口受 GitHub API 限制对文件大小与数量的约束。相比在线打包自定义打包官方明确列出的优势有五点优势项说明不限制项目数量可以创建任意多个项目分支不限制打包频率想打几次打几次不受在线额度约束不限制文件数量dist里有多少文件都可以推上去文件大小放宽到 25M单文件大小限制从在线模式放宽更多自定义打包选项直接改配置文件控制图标、名称、行为开关等本质上自定义打包把前端产物托管和编译发布两件事拆开了产物通过 Git 分支管理每个项目一个分支编译发布则完全交给 fork 仓库里预置的 CI 工作流完成。二、前置条件token 验证与仓库 fork 机制在开始之前需要理解 PakePlus 的仓库分派机制——这是自定义打包能成立的前提你在 PakePlus 网站填写并验证 GitHub token 后系统会把对应的模板仓库自动 fork 到你的 GitHub 账号下桌面端fork 的是PakePlus仓库即本文分析的这份仓库移动端fork 的是PakePlus-Android或PakePlus-iOS仓库。从源仓库的 tauri.conf.json、tauri.windows.conf.json、tauri.linux.conf.json、tauri.macos.conf.json 多份平台配置以及 .github/workflows/build.yml 可以看出fork 出去的PakePlus仓库本身就是一个带完整 CI 的 Tauri 工程壳你只需要替换里面的前端产物和配置编译逻辑已由仓库预置。因此编译桌面端就 clonePakePlus编译移动端则 clonePakePlus-Android/PakePlus-iOS这一点在后续每一步都至关重要。三、完整操作步骤以官方文档中的示例项目deepseek为例整个流程分五步。步骤 1在 PakePlus 上创建项目先登录 PakePlus 创建一个项目项目名称例如deepseek。项目名会直接映射为你 fork 仓库中的分支名——后面所有操作都围绕这个分支进行。步骤 2clone 你的 PakePlus 仓库到本地在你的 GitHub 账号下找到被 fork 出来的 PakePlus 仓库或 PakePlus-Android / PakePlus-iOSclone 到本地git clone https://github.com/你的用户名/PakePlus.git注意这里 clone 的是fork 到你账号下的仓库而不是源仓库。只有 fork 到自己账号下的仓库Actions 的 release 权限contents: write才能产出你可见的 Release 产物。步骤 3切换到项目分支同步 dist 与配置使用 git 命令拉取仓库的所有分支其中一定有与项目同名的分支git fetch --all git checkout deepseek切到deepseek分支后做三件事同步构建产物把你本地前端项目的dist文件夹内容复制到该分支的src目录下然后提交。可选更换应用图标把项目根目录的 app-icon.png 替换成你自己的图标并提交。三个硬性要求——必须是 PNG 格式、文件名必须叫app-icon.png、尺寸必须是 1024×1024 像素仓库根目录自带的 app-icon.png 即为 1024×1024 的参照样例。图标会被构建流程加工成各平台格式例如 src-tauri/icons/icon.icns、src-tauri/icons/icon.ico 及整套 Android 各密度 mipmap 图标见 src-tauri/icons/android/。修改应用配置编辑项目根目录的 scripts/ppconfig.json。桌面端改desktop字段Android 改android字段iOS 改ios字段。步骤 4推送分支并触发编译提交并推送该分支后到 GitHub 仓库的 Actions 页面手动触发工作流git add . git commit -m update dist and config git push origin deepseek触发时的两个关键点分支一定要选择deepseek即你的项目分支然后点击 Run workflow 等待编译完成。步骤 5在 PakePlus 的 release 页面下载软件发布完成后回到 PakePlus 站点对应项目的 release 页面即可下载你的安装包桌面端为.dmgmacOS/.exeWindows等格式移动端为.apk/.ipa。四、ppconfig.json 核心字段详解scripts/ppconfig.json 是自定义打包中最重要的配置文件。官方文档列出的核心字段如下以桌面端desktop字段为准{ name: 英文名称, showName: 显示名称, version: 版本号, id: com.唯一id.app, desc: 项目描述, webUrl: index.html, iconPath: ../app-icon.png, inputPath: ../app-icon.png, tempPath: ./processed-image.png, icnsPath: ../src-tauri/icons/icon.icns, pubBody: 发布内容描述, isHtml: true, single: true, state: true, injectJq: false, tauriApi: false, debug: false }结合仓库中真实的 scripts/ppconfig.json 内容各字段含义与作用如下字段作用仓库中的默认/示例值name应用的英文名称内部标识名示例为PakePlusshowName显示名称用户在系统中看到的名字示例为xiaoshenversion应用版本号随版本递增示例为0.0.2id唯一应用标识遵循反向域名格式示例为com.xiaoshen.appdesc项目/应用描述见 scripts/ppconfig.json 中desc字段webUrl应用加载的入口本地打包指向index.html在线模式为网址示例为https://juejin.cn/iconPath图标源文件路径相对scripts目录../app-icon.pnginputPath图标处理流程的输入路径../app-icon.pngtempPath图标处理过程中的临时输出./processed-image.pngicnsPathmacOS 图标成品输出位置../src-tauri/icons/icon.icnspubBody发布说明会写入 Release 描述见配置文件isHtml是否按本地 HTML 项目打包false在线模式/truedist 本地项目single是否单例模式为true时重复启动会聚焦已有实例而不是开新窗口truestate是否保持窗口状态位置、尺寸等到下次启动trueinjectJq是否向页面注入 jQuery 兼容层falsetauriApi是否向页面暴露 Tauri API配合前端调用原生能力falsedebug是否开启调试模式false几个字段值得结合实现多说两句iconPath→tempPath→icnsPath的三路径设计从源码结构看图标处理是一条读入 → 加工 → 写出的流水线scripts/ppconfig.json 的desktop段同时声明了源路径、临时路径和 macOS icns 成品路径构建时据此把一张 1024×1024 的app-icon.png转成各平台所需格式这也解释了为什么图标文件名和尺寸是硬性要求——流水线按固定路径找文件。tauriApi与injectJqPakePlus 的 Tauri 壳见 src-tauri/src/lib.rs注册了preview_from_config、open_url、open_devtools、start_server、compress_folder等命令并挂载了 fs、dialog、http、updater、store 等 Tauri 插件。开启tauriApi后你的页面 JS 即可通过 Tauri API 调用这些能力injectJq则解决老网站依赖 jQuery 全局对象的问题。移动端字段android段额外包含input/output/copyTo/androidResDir等图标与资源拷贝路径如copyTo: ./app/src/main/resios段则相对精简name、showName、version、webUrl、id、icon、desc、pubBody、isHtml、debug编译 Android/iOS 时以 scripts/ppconfig.json 中对应字段为准修改。五、编译是怎么被触发的Actions 工作流原理自定义打包的魔力来自 fork 仓库预置的 .github/workflows/build.yml读懂它能帮你正确选择编译选项手动触发workflow_dispatch工作流由workflow_dispatch事件驱动这正是文档中到 GitHub Actions 点 Run workflow的底层机制。触发时提供六个布尔开关build_macos_aarch64、build_macos_x86_64、build_linux_x86_64、build_linux_aarch64、build_windows_x86_64、build_windows_aarch64默认全部为true——按需关掉不需要的平台可以显著缩短编译时间。矩阵构建strategy matrix每个启用平台对应一个独立 jobfail-fast: false保证单个平台失败不影响其他平台继续编译timeout-minutes: 60限制了单 job 上限。环境准备工作流使用 pnpm 10 安装前端依赖、Node 22.14.0、Rust stable 工具链及对应 target随后走 Tauri 构建。权限与产物permissions: contents: write让工作流能把构建产物挂到 Release 上这正对应文档最后一步到 release 页面下载你的软件同时pages: write权限支持站点页面的发布。从 src-tauri/Cargo.toml 和 src-tauri/src/lib.rs 可以推断编译时前端产物你放入src目录的dist内容与 Tauri 壳一起被打包Rust 侧负责窗口、菜单、系统能力与更新逻辑前端完全按你推上去的版本运行。六、注意事项与限制分支名 项目名整个流程以项目分支为线索git fetch --all后找不到项目分支多半是项目尚未在 PakePlus 上成功创建触发 Actions 时选错分支会导致编译的不是你的产物。图标三要素缺一不可PNG 格式、文件名app-icon.png、1024×1024任一不满足都会导致图标生成失败。平台与仓库一一对应桌面端改PakePlusfork 并动desktop字段Android 用PakePlus-Android与android字段iOS 用PakePlus-iOS与ios字段跨仓库改动不会生效。文件限制只是放宽而非取消自定义打包将单文件大小限制放宽到 25M但并非无上限极端超大的单个产物仍需自行拆分或压缩。配置生效以推送为准所有修改dist 内容、图标、ppconfig.json都必须 commit 并 push 到项目分支本地改动不会被 Actions 感知。pubBody会影响发布说明Release 的描述文本来自pubBody字段正式发版前建议填写有意义的版本说明而非模板占位文案。七、小结PakePlus 的自定义打包把前端产物和编译流水线解耦产物走 Git 分支管理编译走 fork 仓库预置的 GitHub Actions 工作流配置全部收敛到 scripts/ppconfig.json 一个文件中。对于产物大、文件多、需要频繁迭代的前端项目这条路径绕开了在线打包的 API 限制并且让图标、应用名、版本号、单例、状态保持、jQuery 注入、Tauri API 等选项全部可控——掌握建项目 → clone fork 仓库 → 切分支同步 dist → 改配置 → 触发工作流 → 下载 Release这五步即可完成一次完整的自定义打包发布。【免费下载链接】PakePlusTurn any webpage/HTML/Vue/React and so on into desktop and mobile app under 5M with easy in few minutes. 轻松将任意网站/HTML/Vue/React等项目构建为轻量级(小于5M)多端桌面应用和手机应用仅需几分钟. https://ppofficial.netlify.app项目地址: https://gitcode.com/GitHub_Trending/pa/PakePlus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考