纯 HTML 单文件打包——不用任何构建工具

最简单的 PakePlus 项目

你甚至不需要 Node.js、不需要构建工具——一个纯 index.html 文件加上几个配套资源（CSS、JS、图片），就能打包成桌面 APP。

什么时候用

场景	说明
简单的工具类页面	本地日历、计算器、Markdown 预览器
单页演示	给同事看的原型 Demo
学习 PakePlus	最快上手路径，5 分钟出包
离线版 Web 应用	已有网站想做一个本地可运行的版本
快速原型	还没决定用 Vue/React，先用 HTML 搭起来

步骤

1. 准备文件

my-app/
├── index.html           ← 主入口，必须有
├── style.css            ← 可选
├── app.js               ← 可选
└── images/              ← 可选
    └── logo.png

2. 确保资源引用是相对路径

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的小工具</title>
  <!-- ✅ 相对路径 -->
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <h1>你好，PakePlus</h1>
  <img src="./images/logo.png" alt="Logo">
  <!-- ✅ 相对路径 -->
  <script src="./app.js"></script>
</body>
</html>

3. 打开 PakePlus 创建项目

软件配置页面里的"网站地址"字段：

选整个 my-app/ 目录（推荐）
或者直接选 index.html 文件

4. 预览 → 打包

点预览确认效果 → 发布 → 等产物。

什么时候一个 HTML 文件不够

单个 HTML 文件能做的事情有限，但有些项目天生就是多文件的：

需求	单 HTML 能搞定吗	解决方案
复杂样式	⚠️ 能但建议外部 CSS	分文件组织更清晰
多个功能页面	⚠️ 能（用 hash 路由）	还是 SPA 思路写在一个文件里
大量图片 / 视频	⚠️ 能但文件大	用文件夹组织
依赖 NPM 包	❌ 不能	需要 Vue/React + 构建
编译后的代码	❌ 不能（没有构建）	Vue/React/Cocos/Unity 的 dist

外链资源 vs 本地资源

HTML 里可以引用外部 CDN 资源（如 <script src="你的目标地址@3/dist/vue.global.prod.js">），但有两个注意点：

方式	优点	缺点
全本地	APP 完全离线可用、无网络依赖	打包体积稍大
外链 CDN	文件小、加载快（有缓存）	没网络就打不开、依赖外部 CDN 存活
混合	核心逻辑本地，非关键资源外链	平衡体积和可用性

建议：核心功能依赖的 JS/CSS/图片本地化；非关键的（如统计脚本、社交分享按钮）可以外链。

实战：把 Markdown 文件打包成本地预览器

假设你有一堆 .md 文件想做一个可搜索、可导航的本地工具：

1. 准备文件

md-viewer/
├── index.html              ← 主文件（包含 marked.js CDN 引用）
├── style.css
├── docs/                   ← Markdown 文件目录
│   ├── intro.md
│   ├── usage.md
│   └── api.md
└── manifest.json           ← 可选，PWA 配置

2. index.html 里用 fetch 加载 md 文件

<script>
  async function loadMarkdown(path) {
    const resp = await fetch(path);
    const md = await resp.text();
    const html = marked.parse(md);
    document.getElementById('content').innerHTML = html;
  }
  loadMarkdown('./docs/intro.md');
</script>

3. 注意

PakePlus 桌面端的 WebView 用 file:// 协议加载本地文件，部分浏览器对 file:// 下的 fetch 有限制。如果 fetch 失败：

开 PakePlus 的 TauriApi 开关
用 @tauri-apps/plugin-fs 的 readTextFile 来读取本地 md 文件

HTML 文件大小上限

PakePlus 本身对 HTML 文件大小没有硬性限制，但：

云端打包：GitHub 仓库单文件上限 100MB（推送到 GitHub 时会被拒）
本地打包：无限制
建议：单个 HTML 控制在几 MB 以内，再大就拆成多文件

最终产物

PakePlus 打包后，你的 HTML + 配套资源会被嵌入到 APP 内部——用户双击 EXE/DMG/APK 就能直接运行，不需要安装任何东西、不需要联网（如果资源全本地化的话）。