把前端项目变成真正的手机应用，Capacitor 是一条能走通的路。它由 Ionic 团队维护，不限制你的技术栈，React、Vue、Angular 甚至原生 HTML/CSS/JS 项目都能接进去。
为什么选 Capacitor
- 不挑框架：没有侵入性，现有项目直接集成。
- 现代 WebView：iOS 用 WKWebView，Android 用 Chromium WebView，复杂页面的滑动帧率比早期 Cordova 方案稳得多。
- 原生 API 统一到 JS：相机、文件系统、推送通知等能力通过
@capacitor/core暴露，不用自己写 Swift 或 Kotlin。 - 可以自己扩展：内置 API 不够用？用 Swift（iOS）或 Kotlin（Android）写自定义插件，JS 桥接就能调。
- 全平台覆盖：一套代码能出 iOS IPA、Android APK/AAB，还支持 Electron 桌面应用和 PWA。
底层是怎么跑的
Capacitor 分三层：
- Web 层：你的前端项目跑在原生应用的 WebView 里。
- 桥接层：
@capacitor/core负责 JS 和原生之间的通信。 - 原生层：生成的 Xcode 工程（iOS）和 Android Studio 工程（Android），里面装着 WebView 容器以及插件代码。
整体流程很直：构建 Web 项目 → 同步到原生工程 → 用原生 IDE 编译打包 → 发布到应用商店。
把 Web 项目打成 App 的具体操作
先保证 Node.js（14+）装好了。iOS 打包只能在 macOS 上做，Android 则 Windows / macOS 都行。
安装和初始化
在项目根目录：
npm install @capacitor/cli @capacitor/core
然后初始化，把占位符换成自己的：
npx cap init [应用名称] [应用 ID]
比如：
npx cap init WeatherApp com.acme.weather
这一步会生成 capacitor.config.ts，里面的 webDir 默认指向 dist，记得跟实际构建输出目录对上。
添加平台
以 Android 为例：
npx cap add android
iOS 同理：
npx cap add ios
项目根目录下会多出 android 和 ios 两个文件夹。
构建并同步
先正常 build 你的 Web 项目：
npm run build
然后把资源同步到原生工程：
npx