HTML Packaging Tool
HTML Packaging Tool
By AbyssalQuill

把 HTML 打包成应用

便携版 · 安装包 · APK,一次配置,随时重新打包

下载桌面端
0
应用总数
0
便携版
0
安装包
0
APK
快捷开始打包

我的应用

记录之前构建过的应用,点击卡片可载入配置并一键重新打包

还没有构建记录

完成一次打包后,本次配置会自动保存在这里,下次可直接一键重新打包
打包操作文档

把一个本地 HTML 项目文件夹打包成 Windows 应用(便携版或安装版)。适合纯静态网页,或页面调用远程 API 的项目。网页版:拖入文件夹 → 浏览器下载便携 zip(内含 exe)或 Setup 构建包。

  1. 「选择打包来源」选 本地文件夹,把 HTML 项目文件夹拖进窗口,或点「选择文件夹」。
  2. 「应用信息」填写 应用名称(必填,决定 exe 文件名)、版本号、描述、作者。
  3. 「输出设置」选 打包类型便携版(zip 内含 exe,免安装双击即用)或 安装包(得到 Setup 构建包,Windows 上跑 build-setup.bat 产出 Setup.exe)。
  4. 按需展开下方 高级配置:入口文件(默认 index.html,项目入口是别的名字就改这里)。
  5. 若项目带 Node 后端,展开「高级配置」选 后端类型 = Node.js(网页版会自动内置 Node 运行时);Go/Python/PHP/WordPress 需桌面版或「自定义后端」上传预编译 exe。
  6. 点「开始打包」,等进度条走完,下载产物。

便携版产物是解压即用的 exe;安装包在 Windows 上双击 build-setup.bat 生成 Setup.exe(需安装 Node.js)。两种都能直接给朋友用。

把某个网址打包成桌面应用,应用启动后直接打开该网页。适合后端部署在服务器上的项目,无需本地文件夹。

  1. 「选择打包来源」选 远程网址,输入网址(需以 http://https:// 开头)。
  2. 「应用信息」填写应用名称、版本号、描述、作者。
  3. 「输出设置」选打包类型(便携版 / 安装包)。
  4. 「高级配置」里只填图标等;入口文件这一项网址模式下已自动隐藏,不用管。
  5. 点「开始打包」。产物启动即打开该网址——需保持网址可访问,且网站允许被嵌入打开。

若你的项目带后端(Node/Python/PHP 等),把它部署到服务器拿到网址,再用「远程网址」打包是最省事的方式。

把「本地前端 + 后端」打包成一个 Android 应用。网页版不支持 APK 打包(需要 Android SDK / Gradle / JDK 工具链),请使用桌面版「HTML Packaging Tool」。下方为桌面版操作步骤:

  1. 「选择打包来源」选 本地文件夹,选择前端项目文件夹。
  2. 「输出设置」选 打包类型 = APK 安装包(Android),并选输出目录。
  3. 「应用信息」填名称/版本/描述/作者。
  4. 展开「高级配置」,设置 后端类型(Node / Go / Python / PHP / WordPress)。
  5. 点「开始打包」。首次会检测 Android 工具链(JDK + SDK + Gradle),缺失会提示先安装。
  6. 产物是 .apk,传到手机安装,需允许安装未知来源应用。

把远程网址直接打包成 Android 应用(纯 WebView 壳)。网页版不支持,请用桌面版。

  1. 「选择打包来源」选 远程网址,输入网址。
  2. 「输出设置」选 打包类型 = APK 安装包(Android),并选输出目录。
  3. 「应用信息」填名称/版本/描述/作者。
  4. 点「开始打包」,生成纯 WebView 壳 APK。
  5. APK 传到手机安装,打开即访问该网址。

这种方式不内嵌任何后端,App 就是一个内置浏览器窗口。

「APK · 本地全栈」能内嵌 5 种后端。网页版:Node.js 后端可真实内嵌(自动下载 Node v20.18 运行时);Go / Python / PHP / WordPress 请用桌面版,或在网页版选「自定义后端」上传本地预编译的 exe。

「后端文件夹」什么时候填? 先看这个

后端文件夹 = 后端代码的「家」在哪。只需记住一条规则:

  • 前端和后端混在同一个文件夹(例如根目录有 server.jswww/ 里是页面)→ 不填,工具默认就用「打包来源」目录。
  • 后端单独放在另一个目录(和前端页面分开)→ ,选中后端代码所在的文件夹。
  • 纯前端项目(没有任何后端代码)→ 不填,「后端类型」选「无后端」。
① Node.js 网页版支持

「后端文件夹」:后端 server.js 若和前端页面在同一打包来源目录 → 留空;若单独放另一目录 → 选那个含 package.json 的目录。「后端端口」填后端监听端口(默认 3000)。网页版自动内置 Node 运行时(官方 win-x64 二进制)。

backend/
├── package.json   # main → 入口文件
└── index.js       # 监听 127.0.0.1:3000(与「后端端口」一致)

纯 JS 依赖可直接用;原生模块(bcrypt / sharp 等)需在打包时一并带上,能用纯 JS 就尽量纯 JS。

② Go 桌面版 · 或网页版上传预编译 exe

桌面版用本机 Go 工具链 + NDK 自动交叉编译。网页版:先在本地编译 CGO_ENABLED=0 GOOS=windows go build,再用「自定义后端」上传。

③ Python 桌面版 · 或网页版上传预编译 exe

桌面版内嵌 Chaquopy 运行时。网页版:先用 PyInstaller 等打成单文件 exe,再上传。

④ PHP 仅桌面版

桌面版内嵌 PHP 8.4(含 pdo_sqlite / sqlite3 / curl / mbstring 等),用 php -S 直接托管应用根目录。需要完整 PHP 运行时 + 配置,网页版无法内嵌。

⑤ WordPress 仅桌面版

桌面版自动内嵌 SQLite 数据库插件 + 伪静态路由,免装 MySQL。需要完整 PHP + 数据库注入流程,网页版无法内嵌。

本页讲两件事:① Node 项目的依赖(node_modules)怎么带进包② 后端自己提供网页界面的项目(如 DeepSeek Harness / dsh)怎么填

① 依赖怎么带? 核心

依赖跟着「后端文件夹」走,原样复制、不再过滤。选「后端类型 = Node.js」,「后端文件夹」指到含 package.json + node_modules 的项目目录,工具会把整个目录(含 node_modules 里的 .dll / .exe / .map 原生二进制)完整复制进包,保证启动时不缺文件。

  • node_modules 已存在 → 直接复用打包(推荐:版本精确、离线可用)。
  • node_modules 缺失 → 工具构建期自动 npm install --production 补齐。
  • 依赖需要新版 Node → 在「Electron 版本」填 37.x(内置 Node 22.21);28.x 只有 Node 20.18,跑不了 node:util.parseEnv 等新 API。

依赖「怎么带」总结一句话:选 Node.js 后端 → 后端文件夹指到项目目录 → 依赖跟着原样进包;需新版 Node 就填 Electron 37.x。

② 后端自带界面(无静态 index.html) dsh 专用

有些项目的网页界面由后端进程自己托管(如 DeepSeek Harness 的 dsh CLI 会自起一个 Web 服务),打包时不需要也不该再带一套静态前端。此时勾选「后端进程自己提供 Web 界面」:工具跳过 index.html 检查,窗口直接打开后端地址,WebSocket / 终端流等直连后端。

dsh 完整填写示例 照填即可
打包类型          便携版(EXE,免安装)
打包来源          本地文件夹 → DeepSeek Harness(任意目录,界面由后端提供)
应用名称          DeepSeek Harness       应用版本  1.0.0
── 高级配置 ──────────────────────────────
后端类型          Node.js(Express 等,默认)
后端文件夹        DeepSeek Harness\depends
后端端口          3000(占用时自动顺延)
Electron 版本     37.10.3            ← 内置 Node 22.21,dsh 必需
✅ 后端进程自己提供 Web 界面

安装包(Setup)在超大依赖(数百 MB / 数万文件)下偶有 NSIS 崩溃问题,dsh 这种规模先打便携版最稳。

提示:唯一会排除的是 .git/.svn/.hg 版本库与 .asar 归档(技术必需,非内容过滤)。

源目录是 Vue / React / Next / Nuxt 等前端框架项目时,工具会在打包前自动在源目录执行构建,只把静态产物打进 exe / apk。构建需要在本机(桌面版)执行——网页版没有本机命令环境,不会自动构建;请在本地先 npm run build,把 dist / build / out 产物目录拖进网页版。

支持的框架 → 产物目录
Vue(Vite 脚手架)      →  dist/
React(Vite)            →  dist/
React(CRA)             →  build/
Next.js 静态导出          →  out/          ← 需在 next.config.js 配 output: 'export'
Nuxt(generate)          →  .output/public/
Angular                  →  dist/<项目名>/
Svelte(Vite)            →  dist/
网页版使用方式
  1. 在本地项目目录执行 npm install + npm run build
  2. 把生成的 产物目录(含 index.html)拖进网页版「本地文件夹」;
  3. 入口文件固定为 index.html,直接开始打包。
请作者喝杯奶茶 🧋

喵~如果这个工具帮到了你,可以扫码请小月喝杯奶茶喵,超感谢!也欢迎关注小月喵,一起玩呀~

微信收款码

微信扫一扫 · 关注小月喵 · 关注小月谢谢喵 💖

QQ 联系小月:1736784911

安装打包依赖
安装目录

网页版无需安装工具链:JDK / Android SDK / Gradle / Go / NDK 是桌面版 APK 打包与 Go 后端交叉编译用的。网页版只做 EXE 便携版 / Setup 构建包,运行时自动从镜像下载,无需安装任何东西。如需 APK 打包,请使用桌面版「HTML Packaging Tool」。

安装日志