将您的 Nuxt 应用转换为 iOS 和 Android 应用,Capacitor 8

介绍

您有一个现有的 Nuxt 网站应用程序吗？本指南将教您如何使用 __CAPGO_KEEP_0__ 将其转换为原生 iOS 和 Android 移动应用程序。 Capacitor 8 — 性能更好、功能更丰富的最新版本

Capacitor 将您的 web 应用程序包装在一个本机容器中，给您访问设备 API 的权限，如相机、文件系统和推送通知，而不改变您的现有 Vue 代码库。与 Flutter 或 React Native 不同，您不需要重写任何内容 ——您的 Nuxt code 将保持不变。

您将学习：

配置您的现有 Nuxt 应用程序以进行静态生成
添加 Capacitor 8 以便本机插件
在 iOS 和 Android 模拟器上构建和测试
启用快速开发的实时重载
可选添加 Konsta UI 以便本机样式的组件

想从头开始一个新项目？查看我们的指南《从头开始构建 Nuxt 移动应用程序.

使用 Nuxt 和 Capacitor 的好处

Code 可重用性：将您的 Vue 组件和逻辑共享到 web 和移动应用程序中。
性能: Nuxt 的静态生成创建了优化的包，适合移动端使用。
原生功能: 通过 Capacitor 插件访问设备功能，如摄像头、地理位置和文件系统。
简化开发: 使用熟悉的 Vue/Nuxt 模式而无需学习原生开发。

前置条件

在开始之前，请确保你已经安装了:

Node.js 18+ 已安装
一个现有的 Nuxt 4 应用程序
Xcode (仅限 macOS，用于 iOS 开发)
Android Studio (仅限用于 Android 开发)

为移动设备配置您的 Nuxt 应用程序

步骤一：配置您的 Nuxt 应用程序进行静态生成。Capacitor 需要静态 HTML/JS/CSS 文件来打包到原生应用程序中。

确保您的 package.json 具有生成脚本：

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "mobile": "bun run generate && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

重要提示： 如果您正在使用服务器端功能（API 路由，服务器中间件等），则需要将其重构为使用客户端替代方案或外部 API。

测试静态生成通过运行：

bun run generate

您应该看到一个 .output/public 包含静态文件的文件夹。这就是 Capacitor 将打包到您的原生应用中的内容。

在您的项目中添加 Capacitor 8

将您的 Nuxt 应用打包到原生移动容器中，请遵循以下步骤：

安装 Capacitor 核心和 CLI:

bun add @capacitor/core
bun add -D @capacitor/cli

安装您可能需要的常见 Capacitor 插件：

bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences

这些插件提供了基本功能：

@capacitor/app: 处理应用程序生命周期事件（前台/后台、深度链接）
@capacitor/keyboard: 在移动设备上控制键盘行为
@capacitor/splash-screen: 管理原生启动屏幕
@capacitor/status-bar: 设计设备状态栏
@capacitor/preferences: 本地存储（类似 localStorage，但原生）

初始化 Capacitor 以及您的项目详细信息：

bunx cap init my-app com.example.myapp --web-dir .output/public

替换 my-app 为您的应用名称 com.example.myapp 为您的应用 ID（反向域名表示法）

创建或更新 capacitor.config.ts 文件以获取正确的配置：

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

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: '.output/public',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    StatusBar: {
      style: 'dark',
    },
  },
};

export default config;

安装原生平台：

bun add @capacitor/ios @capacitor/android

添加本机平台文件夹：

bunx cap add ios
bunx cap add android

Capacitor 将创建 ios 和 android 项目根目录下的文件夹，包含本机项目。

为了构建 Android 项目，您需要 Android Studio。对于 iOS，您需要一台 Xcode.

，进行构建和同步您的项目：

bun run mobile

这将运行您的自定义脚本，生成静态 Nuxt 构建并同步文件与本机平台。

构建和部署本机应用

要构建和部署您的本机移动应用，请遵循以下步骤：

为了开发 iOS 应用程序，您需要安装 Xcode ，并且对于 Android 应用程序，您需要安装 Android Studio 。此外，如果您计划将应用程序发布到应用商店，则需要为 iOS 注册 Apple Developer Program，并为 Android 注册 Google Play Console。

打开本机项目：

iOS：

bun run mobile:ios

Android：

bun run mobile:android

或者直接使用 Capacitor CLI：

bunx cap open ios
bunx cap open android

构建并运行应用程序：

android-studio-run

在 Android Studio 中，等待项目准备好，然后单击“运行”按钮将应用程序部署到连接的设备或模拟器上。

xcode-run

在 Xcode 中，设置您的签名账户以在真实设备上部署应用。如果您之前没有这样做过，Xcode 将指导您完成该过程（请注意，您需要注册 Apple Developer Program）。一旦设置好，请点击“Play”按钮以在连接的设备上运行应用。

恭喜！您已成功将 Nuxt 网站应用部署到移动设备。

但请稍等，开发期间还有更快的方法……

Capacitor Live Reload

在开发期间，您可以利用实时重载功能来在移动设备上立即看到更改。要启用此功能，请遵循以下步骤：

找到您的本地 IP 地址：

在 macOS 上，在终端中运行以下命令：
```
ipconfig getifaddr en0
```
在 Windows 上运行：
```
ipconfig
```
在输出中查找 IPv4 地址。

更新您的 capacitor.config.ts 指向您的开发服务器：

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

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: '.output/public',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... your plugin config
  },
};

export default config;

替换 YOUR_IP_ADDRESS 使用您的本地 IP 地址（例如， 192.168.1.100).

将更改应用到您的原生项目：

bunx cap copy

命令将复制 Web 文件夹和配置更改到原生项目中，而不更新整个项目。 copy 启动 Nuxt 开发服务器并在 Xcode/Android Studio 中重建：

现在，无论您对 Nuxt 应用程序进行哪些修改，移动应用程序都会自动重新加载以反映这些更改。

bun run dev

注意：

如果您安装新插件或修改原生文件，则需要重建原生项目，因为实时重新加载仅适用于 Web __CAPGO_KEEP_0__ 更改。 使用 code 插件

Capacitor 插件使您能够从 Nuxt 应用程序访问原生设备功能。让我们探索如何使用这些插件。

to point to your development server:Capacitor 分享插件例如：

安装分享插件：

bun add @capacitor/share

创建或更新一个页面来使用分享插件。在 Nuxt 4 中，页面位于 app/pages/:

<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">Welcome to Nuxt + Capacitor!</h1>
    <button
      @click="shareContent"
      class="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold"
    >
      Share now!
    </button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function shareContent() {
  await Share.share({
    title: 'Check this out!',
    text: 'Built with Nuxt and Capacitor',
    url: 'https://capacitorjs.com',
    dialogTitle: 'Share with friends',
  });
}
</script>

同步更改到原生项目：

bun run mobile

或仅同步而不重建：

bunx cap sync

重建并在设备上运行应用程序。

现在，当您点击“立即分享！”按钮时，原生分享对话框将出现。

添加 Konsta UI v5 和 Tailwind CSS 4

为了使按钮看起来更具移动性，可以在原生 iOS 和 Android 组件中添加 Konsta UI。

您需要 Tailwind CSS 4 已经安装.

安装所需的包：

bun add konsta
bun add tailwindcss @tailwindcss/vite

在 nuxt.config.ts:

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
});

创建 app/assets/css/main.css:

@import 'tailwindcss';
@import 'konsta/theme.css';

将您的应用程序包裹在 Konsta UI 中： App 更新您的页面以使用 Konsta UI 组件： app/app.vue:

<template>
  <App theme="ios">
    <NuxtPage />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

为 Material Design 主题添加 Roboto 字体：

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Nuxt & Konsta UI app. Let's see what we have here.
      </p>
    </Block>

    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/vue';
</script>

您的 Nuxt 应用程序现在应该具有原生看起来的移动 UI： nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
        },
      ],
    },
  },
  // ... rest of config
});

konsta-nuxt

您成功将现有的 Nuxt 网页应用程序转换为原生 iOS 和 Android 应用程序，使用 __CAPGO_KEEP_0__ 8。您的 Vue 代码库现在可以在移动设备上原生运行，具有访问设备 API 的能力。

You’ve successfully converted your existing Nuxt web application into native iOS and Android apps using Capacitor 8. Your Vue codebase now runs natively on mobile devices with access to device APIs.

Install the required packages: Capgo CLI will automatically install the required packages for you. If you want to install them manually, you can run the following command: npm install @capgo/cli @capgo/konsta-nuxt

配置了 Nuxt 以静态生成
Capacitor 8 添加了基本插件
构建并部署到 iOS 和 Android 模拟器
为开发启用了实时重载
可选添加 Konsta UI 以获得原生样式的组件

下一步:

设置 Capgo 为无需重新提交应用商店的 OTA 更新
添加更多原生插件，如摄像头、地理位置或推送通知
配置应用图标和启动屏幕以便生产
为 App Store 和 Google Play 提交做好准备

开始一个全新的项目？从零开始构建一个 Nuxt 移动应用查看我们的指南。

资源

了解如何使用 Capgo 快速高效地构建更好的应用注册一个免费账户今天就开始。

使用 Capacitor 8 将您的 Nuxt 应用程序转换为 iOS &amp; Android

介绍