使用 Capacitor 将 Bolt.new 项目变成原生移动应用

简介

Bolt.new 是一个创新的 AI 驱动开发平台，能用 React、Vue、Svelte 等多种框架生成全栈 Web 应用。但如果你想把自己的 Bolt.new 作品带到移动设备上呢？在这篇完整教程中，我们将展示如何导出 Bolt.new 项目，并将其转换为原生移动应用，使用 Capacitor.

简而言之： 这个将 Bolt 项目转换为 iOS 和 Android 应用一屏概括了完整路径：导出、Capacitor、无需 Mac 的云端构建，以及 Live Updates。

无论您的 Bolt.new 项目是使用 React、Vue 还是其他支持的 framework，本指南都将帮助您构建原生 iOS 和 Android 应用，并调用摄像头、存储和推送通知等设备功能。

开始之前：要求与时间

预计耗时: 完成全部配置需 3-5 小时

系统要求:

iOS 开发: 安装了 macOS 12.0+ 的 Mac（必选，无替代方案）
Android 开发：任何操作系统 (Windows/Mac/Linux)
可用空间：开发工具需 20-30GB
内存：最低 8GB RAM，推荐 16GB

预算需求:

Apple Developer：$99/年 (用于 iOS App Store)
Google Play：$25 一次性费用
Cursor Pro：$20/月 (可选，可加速开发)

安装清单:

Node.js & npm
Xcode（仅限 Mac，用于 iOS）
Android Studio（用于 Android）
各类命令行工具

为什么要将 Bolt.new 应用转为移动端？

跨平台覆盖: 将你的 AI 生成应用部署到移动应用商店
原生设备访问: 使用摄像头、GPS、文件系统等原生功能
性能提升: 原生容器比 WebView 性能更好
离线能力: 使用原生存储方案实现离线工作
推送通知: 通过原生推送通知提升用户参与度

为什么选择 Capacitor 而非 Expo？

如果你正在考虑移动端开发方案，Capacitor 相比 Expo 具有显著优势，尤其是在 Web 优先的开发场景下：

一套代码，三端运行: 你现有的 React、Next.js 或 Vue.js 网站无需任何转换，即可直接变为 iOS、Android 及 Web 应用
无需重新构建: 直接使用你的 Bolt.new 项目即可 —— 无需像 Expo 那样为适配不同框架而重写代码
真正的 Web 优先方案: 不同于移动优先且 Web 端体验笨重的 Expo，Capacitor 将 Web 视为一等公民
无缝开发: 继续使用你熟悉的 Web 开发工具和工作流
框架自由度: 支持任何 Web 框架 (React, Vue, Svelte, Next.js 等) —— 不像 Expo 那样被绑定在 React Native 上

核心区别：

使用 Capacitor: 构建你的网站 → 添加移动端支持 (同一套 codebase)
使用 Expo: 为移动端构建 → 再想办法让 Web 端能用 (思路不同，通常还很别扭)

由于你的 Bolt.new 项目本身就是一个 Web 应用，Capacitor 可以让你在不改动一行 code 的情况下将其扩展到移动端。而 Expo 则要求你按照它的框架重构整个项目。

第 1 步：搭建开发环境

获取 Cursor —— 你的 AI 驱动 Code 编辑器

为了高效开发 Bolt.new 项目，我们将使用 Cursor，这款智能 code 编辑器能极大简化开发流程：

前往 cursor.sh 并下载适用于你操作系统的安装程序
完成安装过程
安装完成后启动 Cursor

启动 Cursor

配置 Cursor，最大化效率

要充分发挥 Cursor 的作用，需要先进行一些初始设置：

考虑升级至 Cursor Pro - 免费版可用，但 Pro（$20/月）可解锁：
- 不限量 AI 辅助
- 高级模型（GPT-4、Claude）
- 即时响应
- 高级支持
打开设置 配合 Command+, (Mac) 或 Ctrl+, （Windows）

Cursor 设置

启用 AI 功能 - 确保 AI 辅助已开启：

允许使用模型

选择你的 AI 模型 - 我们推荐使用 Claude 或 GPT-4：

选择 Cursor 模型

启用命令执行 - 让 Cursor 自动执行命令：

允许运行命令

第 2 步：导出你的 Bolt.new 项目

现在，把 Bolt.new 项目导入 Cursor。

下载你的项目

在浏览器中打开你的 Bolt.new 项目
找到下载或导出 Bolt 界面中的按钮

下载包含项目的 ZIP 文件
将其解压到电脑上的文件夹

Bolt.new 项目文件

在 Cursor 中打开

解压后，在 Cursor 中打开项目：

使用 File > Open Folder 在 Cursor 中
选择解压后的 Bolt.new 项目文件夹
Cursor 将加载你的项目

在 Cursor 中打开

备选方案：从 GitHub 克隆

如果你已将 Bolt.new 连接到 GitHub：

按下 Shift+Command+P (Mac) 或 Shift+Ctrl+P （Windows）
搜索“Git: Clone”
输入你的仓库 URL
选择保存位置

在 Cursor 中克隆

步骤 2：确认你的项目框架

Bolt.new 可以使用不同的框架生成项目。来确认一下你用的是哪种：

检查 package.json

打开 package.json 看看你的项目用的是什么框架：

Bolt.new package.json 检查

常见的 Bolt.new 项目类型：

React + Vite: 最常见的配置
Vue + Vite: Vue.js 应用
Svelte: Svelte 应用
Next.js: 全栈 React 应用
原生 JS: 纯 JavaScript 应用

步骤 3：安装开发工具

方案 A：让 Cursor AI 处理一切

按下 Command+K (Mac) 或 Ctrl+K (Windows) 在 Cursor 中

输入此请求：

Install all necessary development tools including Node.js, then install project dependencies and start the dev server

Cursor AI 会自动：

安装 Node.js，如有需要请安装 npm
在 macOS 上配置 Homebrew
安装所有项目依赖
启动开发服务器

安装 Homebrew

方案 B：手动安装流程

如果你更倾向于手动控制，或者 AI 方案遇到问题：

首先，打开 Cursor 的终端 配合 Shift+Command+T (Mac) 或 Shift+Ctrl+T （Windows）

macOS 用户请参考：

# Get Homebrew package manager
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js via Homebrew
brew install node

# Move to your project folder
cd your-bolt-project

# Install project packages
npm install

# Launch development server
npm run dev

Windows 用户：

从以下地址下载 Node.js 安装程序： nodejs.org
完成安装向导
在 Cursor 终端中：

cd your-bolt-project
npm install
npm run dev

Bolt.new 应用在本地运行

您的 Bolt.new 应用现在应该已启动（通常位于 http://localhost:5173 适用于 Vite 项目）。

步骤 4：配置移动端构建

具体配置取决于您使用的项目框架。

方案 A：使用 Cursor AI 自动配置

让 Cursor AI 处理配置：

Configure my Bolt.new project for mobile deployment with proper build settings

Cursor 会检测你的 framework 并应用正确的配置。

方案 B：按 framework 手动配置

适用于 React + Vite 项目：

编辑 vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
})

适用于 Vue + Vite 项目：

修改 vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  },
})

适用于 Next.js 项目

添加到你的 package.json scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "static": "next build && next export"
  }
}

更新 next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

第 5 步：构建你的项目

现在该为你的 Bolt.new 应用创建生产 build 了。

方案 A：使用 Cursor AI 构建

只需在 Cursor 中输入：

Build my Bolt.new project for production deployment

Cursor 会根据你使用的 framework 运行相应的 build 命令。

方案 B：手动构建

针对基于 Vite 的项目 (React/Vue/Svelte)：

npm run build

Bolt.new Vite build 成功

针对 Next.js 应用：

npm run static

确认构建成功

确保你的 build 生成了正确的输出：

Vite 项目：查找 dist 目录
Next.js 项目：检查是否有 out 目录

Bolt.new 构建输出

第 6 步：将 Capacitor 添加到你的 Bolt.new 项目

让我们把你的 Web 应用转换为原生移动应用。

方案 A：使用 Cursor AI 快速设置

按下 Command+K (Mac) 或 Ctrl+K (Windows) 并请求：

Add Capacitor to my project and set up iOS and Android platforms

Cursor AI 会处理整个设置流程。

方案 B：手动分步设置

安装 Capacitor 的命令行工具：

npm install -D @capacitor/cli

初始化你的 Capacitor 项目：

npx cap init

使用 Capacitor 初始化 Bolt

系统将提示你输入：

应用名称：你的 Bolt.new 项目名称
Bundle ID：格式如下 com.yourcompany.yourapp

继续手动设置 - 安装核心依赖包：

npm install @capacitor/core @capacitor/ios @capacitor/android

添加移动端平台支持：

npx cap add ios
npx cap add android

Bolt 已添加 Capacitor 平台

刚才发生了什么？

您的 Bolt.new 项目结构如下：

your-bolt-project/
├── src/           # Your app source (React/Vue/etc)
├── public/        # Static files  
├── dist/          # Build output (Vite)
├── out/           # Build output (Next.js)
├── ios/           # iOS Xcode project (NEW!)
├── android/       # Android Studio project (NEW!)
├── capacitor.config.ts  # Mobile configuration
└── package.json   # Dependencies

重要注意事项:

您的 Web code 保留在 src/ - 在此处编辑
ios/ 以及 android/ 自动生成 - 请勿编辑
修改完成后，请务必运行 npx cap sync
每个平台都有各自的 build 流程

第 7 步：配置 Capacitor

现在为您的特定 framework 配置 Capacitor。

方案 A：使用 Cursor 自动配置

请求 Cursor 协助：

Configure capacitor.config.ts for my Bolt.new project build output

方案 B：手动配置

针对基于 Vite 的应用：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

针对 Next.js 应用：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

第 8 步：Build 和 Sync

为移动端部署准备您的应用。

方案 A：使用 Cursor AI

告诉 Cursor：

Build my project and sync it with Capacitor for mobile deployment

方案 B：手动流程

请按顺序执行以下命令：

npm run build
npx cap sync

Capacitor 同步 Bolt 完成

第 9 步：使用 Capgo Builder 构建可上架二进制文件（推荐）

您无需 Mac 或完整的本地 Xcode/Android Studio pipeline 即可将应用发布至 App Store 和 Google Play。 Capgo 构建器 支持在云端进行编译、签名并提交 iOS 和 Android 构建版本 —— 这是将 Bolt.new 导出的 vibe-coded 应用转化为移动端的最快路径。

为什么选择 Capgo Builder？

无需 Mac 即可构建 iOS 版本 —— 支持从 Windows、Linux 或你的 AI 编程环境进行构建
统一的 CLI 工作流 —— 易于编写脚本并交给 Cursor、Claude Code 或 Codex 处理
完美配合 Live Updates —— 通过 OTA 推送 JS/UI 修复；仅在插件或权限变更时才需重新构建 Native Build

设置 Capgo Builder

在本地完成生产环境构建和 Capacitor 同步后：

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

只需保存一次签名凭据（Apple 证书、provisioning profiles、Android keystore）。详见凭据管理以及在 Windows 上构建 iOS.

发起云端构建

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release

Capgo Builder 会在终端中实时流式传输构建日志。配置好 App Store Connect 后，iOS 构建可以直接推送到 TestFlight。

上传你的 Web bundle 以进行 OTA 更新：

npx @capgo/cli@latest bundle upload --channel production

步骤 10：打开 Native IDE（可选，用于本地测试）

如果你有 Mac，或者想在云端构建前进行模拟器测试，请在本地打开原生项目：

访问你应用的 Native 开发环境。

iOS 开发

方案 A：通过 Cursor AI

Open my iOS project in Xcode

方案 B：终端命令

npx cap open ios

用 Xcode 打开 Bolt 项目

Android 开发

方案 A：通过 Cursor AI

Open my Android project in Android Studio

方案 B：终端命令

npx cap open android

用 Android Studio 打开 Bolt 项目

步骤 11：本地构建并运行（可选）

在 iOS 上运行

配置 Xcode（首次使用）

选择目标设备:
- 点击 Play 按钮旁的设备选择器
- 测试用：选择任意 iPhone 模拟器
- 真机：通过 USB 连接 iPhone
配置 Code 签名:
- 点击左侧边栏中的项目名称
- 前往 “Signing & Capabilities” 标签页
- 启用 “Automatically manage signing”
- 使用您的 Apple ID 登录
- 注意: 真机调试需要 Apple Developer Program ($99/年)
构建您的 App:
- 点击 ▶️ Play 按钮
- 首次构建：需 5-10 分钟（请耐心等待！）
- 查看顶部的进度条

iOS 故障排除:

“未找到账号”：在 Xcode > Settings > Accounts 中添加 Apple ID
“构建失败”：清理构建文件夹 (Shift+Command+K) 并重试
模拟器问题：通过 Device > Restart 重启模拟器

在 iOS 上运行 Bolt 应用

在 Android 上运行

配置 Android Studio（首次使用）

SDK 配置 （自动）：
- Android Studio 将检测缺失的组件
- 出现提示时点击 “Install missing SDK”
- 这会下载约 2-3GB 的文件
创建虚拟设备:
- 打开 AVD Manager（工具栏中的手机图标）
- 点击 “+ Create Virtual Device”
- 选择 “Pixel 6”（不错的默认选择）
- 出现提示时下载系统镜像
- 使用默认选项完成设置
运行你的 App:
- 从下拉菜单中选择你的模拟器
- 点击绿色 ▶️ 运行按钮
- 首次构建：10-15 分钟
- 模拟器自动启动

Android 故障排除:

“Gradle sync failed”: 尝试 File > Invalidate Caches
模拟器运行缓慢: 在 AVD 设置中启用硬件加速
构建错误: 通过建议的修复方案更新 Gradle

Bolt 应用在 Android 上运行

验证清单

构建成功后，请确认：

✅ App 启动无崩溃 ✅ Bolt.new 内容显示正常 ✅ 按钮与交互功能正常 ✅ Console 无红色错误

仍有问题吗？ 错误信息通常会直接告诉你哪里出了问题——仔细读一下！

步骤 12：启用 Live Reload（开发阶段）

利用热重载（hot reloading）加速你的开发工作流。

方案 A：使用 Cursor 自动配置

问问 Cursor：

Enable live reload for my Capacitor app development

Cursor 会自动配置好一切。

方案 B：手动配置

获取你的本地 IP 地址：

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

更新您的 capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist', // or 'out' for Next.js
  bundledWebRuntime: false,
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173', // or 3000 for Next.js
    cleartext: true,
  },
};

export default config;

应用配置：

npx cap copy

已启用 Live reload 的 Bolt

第 13 步：添加原生功能

为您的 Bolt.new 应用增强原生设备能力。

方案 A：AI 驱动的集成

向 Cursor 发出指令：

Add native share, camera, and geolocation features to my Bolt.new app

Cursor 将安装插件并创建 code 集成。

方案 B：手动安装插件

安装常用的原生插件：

npm i @capacitor/share @capacitor/camera @capacitor/geolocation

为 React 项目创建工具文件：

// utils/capacitor.js
import { Share } from '@capacitor/share';
import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';

export const shareContent = async (title, text, url) => {
  await Share.share({
    title,
    text,
    url,
    dialogTitle: 'Share with friends',
  });
};

export const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  return image;
};

export const getCurrentPosition = async () => {
  const coordinates = await Geolocation.getCurrentPosition();
  return coordinates;
};

在组件中使用

// For React components
import React from 'react';
import { shareContent, takePicture } from '../utils/capacitor';

function MyComponent() {
  const handleShare = () => {
    shareContent('My Bolt App', 'Check out this amazing app!', 'https://your-app.com');
  };

  const handleCamera = async () => {
    try {
      const photo = await takePicture();
      console.log('Photo taken:', photo);
    } catch (error) {
      console.error('Camera error:', error);
    }
  };

  return (
    <div>
      <button onClick={handleShare}>Share App</button>
      <button onClick={handleCamera}>Take Photo</button>
    </div>
  );
}

export default MyComponent;

同步更改

使用 Cursor AI：

Sync my native feature changes to all platforms

手动执行命令：

npx cap sync

Bolt 新增原生功能

第 14 步：生产环境优化

应用图标与启动页

方案 A：Cursor AI 配置

提示词：

Create app icons and splash screens for my mobile app

方案 B：手动创建素材

获取素材工具：

npm install -D @capacitor/assets

准备你的图形素材：
- 创建 assets/icon.png (1024x1024px)
- 创建 assets/splash.png (2732x2732px)
自动生成所有尺寸：

npx capacitor-assets generate

Bolt 应用资源已生成

优化 Build

针对 Vite 项目，优化你的 build：

// vite.config.js
export default defineConfig({
  plugins: [react()], // or vue()
  base: './',
  build: {
    outDir: 'dist',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

最终 Build

方案 A：使用 Cursor AI 构建

Create the final production build and prepare for app store deployment

方案 B：手动 Build 流程

npm run build
npx cap sync
npx cap copy

常见问题排查

特定框架相关问题

React/Vite 项目

确保 base: './' 已在 Vite 配置中设置
检查所有 import 是否都使用相对路径
验证 dist 文件夹是否已正确生成

Vue 项目

确保 Vue Router 在移动端使用 hash 模式
检查资源引用是否正确
验证组件懒加载在移动端是否正常工作

Next.js 项目

确保 static export 配置正确
检查动态 import 在静态环境下是否正常工作
验证未使用 API 路由（或已妥善处理）

构建错误

如果遇到构建错误：

清理 node_modules 并重新安装：

rm -rf node_modules package-lock.json
npm install

检查 Bolt.new 项目依赖是否兼容移动端
确保所有相对路径在移动端部署时都正确

资源缺失

如果遇到资源加载问题：

确认所有资源都在 public 文件夹中
对图片和文件使用相对路径
检查构建过程是否复制了所有必要的资源

总结

恭喜！你已成功将 Bolt.new 项目转换为原生移动应用。你的 AI 生成的 Web 应用现在可以：

在 iOS 和 Android 设备上原生运行
访问摄像头、GPS 和存储等设备功能
通过应用商店进行分发
提供优化的移动端用户体验

下一步

Capgo 构建器: 使用云原生构建进行 TestFlight 和 Play Store 发布
Capgo Live Updates: 实现 Capgo 以实现即时的 OTA 更新
数据分析: 添加移动端分析以追踪用户行为
性能: 监控并优化应用的移动端性能
测试: 在各种设备和屏幕尺寸上测试应用

你的 Bolt.new 项目现已准备好接入移动生态！

资源

了解 Capgo 如何帮你为移动应用提供即时更新，注册免费账号今天就开始。

继续阅读：使用 Capacitor 将 Bolt.new 项目转化为原生移动应用

如果你正在使用 使用 Capacitor 将 Bolt.new 项目变成原生移动应用 要规划原生插件工作，请将其与 Capgo 插件目录查看 Capgo 插件目录中的产品工作流， Capgo 提供的 Capacitor 插件查看由 Capgo 提供的 Capacitor 插件中的实现细节，添加或更新插件查看添加或更新插件中的实现细节， Ionic Enterprise 插件替代方案查看 Ionic Enterprise 插件替代方案中的产品工作流，以及 Capgo Native Build 查看 Capgo Native Builds 中的产品工作流。