React/Vue/Vite 前端项目：构建产物直接套壳
为什么需要「前端」类型
React、Vue、Vite 这类现代前端框架的构建产物（dist/ 或 build/ 目录）有几个特点：
- 使用 ES modules（import / export）
- 有同源策略需求
- 可能有 client-side routing（history 模式需要服务器端 fallback）
- 有时还需要 WebSocket 或 service worker
直接用「HTML」类型 + 文件协议加载会在 ES modules 环节卡住——浏览器出于安全考虑禁止 file:// 协议下的模块加载。
「前端」类型做了什么
前端类型的方案是：在 APK 内嵌一个轻量 HTTP server，把你的构建产物发布在 localhost 端口上。WebView 访问 http://127.0.0.1:xxxx/，所有同源策略、模块系统、路由 fallback 都正常工作。
这和「HTML」类型的 localhost 托管模式本质一样，但前端类型针对 React/Vue/Vite 做了额外优化：
- 自动识别 dist/ / build/ / out/ 等常见构建产物目录
- 对 client-side routing 自动配置 fallback（任何路径都返回 index.html）
- 更好的资源缓存策略
创建流程
- 打开类型选择器，点「前端」卡片
- 选择你的构建产物目录（dist/、build/、out/ 等）
- 确认入口文件（通常是 index.html）
- 在基本信息里填应用名称和图标
- 点击保存
支持的框架
WebToApp 内置了常见框架的配置模板，开箱即用的包括：
- React（CRA、Vite）
- Vue（Vite、Nuxt 静态产物）
- Vite（通用）
- Svelte
- Next.js 静态导出（next export / output: 'export'）
- Gatsby
如果你的框架不在列表里，手动指定构建产物目录和入口文件即可——localhost server 会自动托管。
和 Node.js 类型的区别
| 维度 | 前端 | Node.js |
|---|---|---|
| 产物输入 | 静态构建产物（dist/） | 源码 + 启动脚本 |
| 运行方式 | 静态 HTTP server | 原生 Node.js runtime |
| 适用框架 | React、Vue、Vite 等 SPA | Express、Fastify、Koa 等服务 |
| 需要编译 | 不需要（已经是构建好的产物） | 首次需要安装依赖 |
简单说：前端类型处理已经编译好的静态产物，Node.js 类型处理需要运行时解释的源码项目。
性能考量
localhost 转发会比文件协议略慢（多了一个 HTTP 往返），但对于 SPA 应用来说差异可以忽略——静态资源会被 WebView 缓存，只有首次加载走完整路径。APK 体积会比 HTML 类型多一个轻量 HTTP server（通常几十 KB）。