几分钟免费把网页打包成应用：PakePlus桌面应用打包实战-育师

几分钟免费把网页打包成应用：PakePlus桌面应用打包实战

【免费下载链接】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

PakePlus是一款免费的网页打包成应用工具：把任意网站、HTML或Vue/React项目几分钟内构建为桌面应用和手机应用，打包产物不到5MB，不要求你本地装Rust或Node.js。

先搞清楚：它适合谁

读完这一节，你能判断自己的需求是否对路，以及它和常见方案差在哪。

想把常用网站做成独立入口：不用每次打开浏览器输网址，几分钟就能得到一个带窗口、带图标的桌面应用。
受够了Electron的体积：那类方案的安装包通常在100M以上，而PakePlus打包出来只有几MB。
不想折腾开发环境：走云端打包只需一个GitHub账号加Token；走本地打包也只需Git和克隆仓库，无需预装Rust、Node.js等工具链。
一套配置多端出包：Windows、macOS、Linux桌面端和Android、iOS移动端都能生成对应安装包。

准备工作

这一节做完，后面打包时就不会再卡在装软件或找Token的地方。

下载安装包

三个系统的安装包都放在 docs/bundle/ 目录，按你的系统取用：

Windows：下载 redbook_0.0.1_x64-setup.exe（x64架构），双击运行。弹出"Windows 已保护你的电脑"时，点"更多信息"再点"仍要运行"，按向导走完即可。

macOS：下载 aarch64 架构的 dmg，打开后把应用拖进"应用程序"文件夹。首次启动提示"无法打开"时，去"系统设置→隐私与安全性"点"仍要打开"：

如果开发者验证一直报错，可在终端执行xattr -d com.apple.quarantine /Applications/PakePlus.app移除隔离标记。

Linux：执行sudo dpkg -i redbook_0.0.1_amd64.deb安装；若提示缺少依赖，再补一句sudo apt install -f，之后从应用菜单启动或在终端输入pakeplus运行。

GitHub Token怎么配（仅云端打包需要）

云端编译跑在GitHub平台上，所以要一个Token授权；只做本地打包可以跳过本节。

登录GitHub，进个人设置→开发者设置→Personal access tokens，选择 Tokens (classic) 类型。
生成时勾选三项权限：repo、workflow、user。
复制生成的Token，回到PakePlus主界面点击右上角设置图标，粘贴并验证。

⚠️ Token只显示一次，复制后立刻妥善保存；弄丢了只能重新生成。

三步完成首次打包：网页变应用

这一节走最短路径：新建→填必填项→预览发布，高级选项先不用管。

第1步：新建项目

启动PakePlus，点主界面的"+"输入项目名称，随后在配置页填好以下四项：

项目名称：字母数字组合，不能重复；
网站地址：http/https链接；打包本地项目时点"浏览"选择 index.html 或 dist 目录；
APP标识：全局唯一ID，建议反向域名格式，如 com.example.myapp；
版本号：语义化版本号（主.次.修订号），如 0.0.1，每次打包递增。

第2步：完成必要配置

新建后直接进入配置页。必填项共4个，各管一件事：

应用名称：显示在桌面和开始菜单，支持中文；
目标地址：要打包的网址或本地文件；
应用标识：软件唯一ID，不能与其他项目撞车；
版本号：标识当前版本，发布新版本时递增。

推荐项是几处开关和尺寸，勾上后体验更顺手：

配置项	作用
应用图标	上传1024×1024的PNG，支持圆角预览
窗口模式	桌面/iPhone/iPad/Android等预设尺寸，省得自己算
单例模式	防止多开窗口，适合工具类应用
状态保持	重启后恢复上次的窗口位置与大小

第3步：预览并发布

先点"预览"打开一个临时窗口：可以实时拖动改窗口大小，右键调出开发者工具，顺便验证注入的脚本是否生效。

效果满意后点"发布"：勾选目标平台（Windows、macOS、Linux、Android等），填写更新日志，确认即可。云端编译大约5~10分钟，进度在"发布记录"里能查到。

云端打包限频：每小时1次，单次最多选3个平台；平台多的话分多次发布。

进阶玩法

这一节每项先说"解决什么问题"，再给做法，适合已跑通首包、想再挖深一点的读者。

隐藏元素与注入脚本

解决的问题：页面上有想屏蔽的广告弹窗，或想让表单自动填好。

在"过滤元素"填入CSS选择器（英文分号分隔），应用加载后这些元素会被直接隐藏：

.ad-banner, .popup-modal

这行表示把两个类名的元素全部藏掉。更灵活的做法是用"脚本文件"挂一段JS，比如自动填登录信息：

document.getElementById('username').value = 'myaccount'; document.getElementById('password').value = 'mypassword';

运行后页面一加载就完成填充，不用手动输入。

窗口外观定制

解决的问题：默认窗口带标准边框，想要无边框、透明背景或始终置顶。

在"更多配置"里写一小段Tauri JSON即可：

{ "tauri": { "windows": [ { "decorations": false, "transparent": true, "alwaysOnTop": true } ] } }

decorations 管边框，transparent 管背景透明，alwaysOnTop 管置顶。全部字段说明见 Tauri完整配置。

打包自己的前端项目

解决的问题：要打包的不是现成网站，而是自研的Vue/React工程。

先在工程里执行npm run build产出 dist 目录，然后回PakePlus把目标地址改为"本地文件"，浏览选中 dist 目录，并开启静态文件模式，页面内的相对路径会被自动处理好。

调用Tauri系统API

解决的问题：想让页面里的按钮执行写文件、弹系统对话框、跑进程等系统级操作。

前提是在配置里勾上 TauriApi，之后页面JS就能用常用命名空间：fs（文件）、dialog（对话框）、shell（进程）、window（窗口控制）。以写文件为例：

window.__TAURI__.fs.writeTextFile({ path: 'document.txt', contents: 'Hello from PakePlus!' }).then(() => alert('文件保存成功'));

完整接口清单见桌面端API文档。

本地打包模式

解决的问题：资源文件太大、打包太频繁，撞上了云端限制。

本地打包对文件大小不设限，本地打包命令流程如下：

克隆仓库：git clone https://gitcode.com/GitHub_Trending/pa/PakePlus
进入 scripts/ppconfig.json 修改名称、标识、版本等字段
执行打包命令：

npm run build:desktop # 桌面端 npm run build:android # 移动端，iOS用 build:ios

产物位置：桌面端在src-tauri/target/release/bundle/，移动端在src-tauri/mobile/target/。更细的同步与触发流程见自定义打包。

问题速查

下表汇总了高频现象，遇到对号入座找解法。

现象	可能原因	处理办法
窗口空白	目标URL不可访问，或本地文件路径选错	先用浏览器验证地址，再重新选择本地文件
图标不显示	图片规格不符，或路径含中文	换成1024×1024的PNG，并把路径改到纯英文目录
Windows安装被拦	Defender/SmartScreen误报	"更多信息→仍要运行"，或临时关闭Defender再装
macOS提示"无法打开"	系统拦截未签名应用	隐私与安全性里点"仍要打开"，或用xattr命令去隔离
云端打包失败	网络不稳、单文件超10M、标识或版本号格式错	换有线网络、压缩资源、核对APP标识与版本号写法

仍解决不了的话，按问题自查文档逐条排查。

到这里，从安装PakePlus到放出第一个应用的全流程就走完了：填几分钟配置，一个网站就能住进独立窗口。接下来想深入，可以从这几个方向入手：用脚本注入写自动化操作、用CSS做界面个性化、参与插件开发与社区共建。PakePlus是开源项目，欢迎到仓库提交Issue和PR。现在就挑一个你每天都用的网站，给它做成专属应用吧。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考