跳过主要内容
Capgo logo
教程

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

将您的现有 Nuxt 4 网站应用程序转换为 native iOS 和 Android 移动应用程序，使用 Capacitor 8。配置静态生成、添加本机插件和部署到应用商店的完整指南。

Martin Donadieu

Martin Donadieu

内容营销人员
将您的 Nuxt 应用程序转换为 iOS & Android，使用 Capacitor 8

介绍

您有一个现有的 Nuxt 网站应用程序吗？本指南将教您如何将其转换为 native 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 (仅适用于 iOS 开发, macOS)
  • 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 应用程序打包到原生移动容器中，请遵循以下步骤：

  1. 安装 Capacitor 核心和 CLI:
bun add @capacitor/core
bun add -D @capacitor/cli
  1. 安装您可能需要的常见 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 但原生)
  1. 初始化 Capacitor 以及您的项目详细信息:
bunx cap init my-app com.example.myapp --web-dir .output/public

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

  1. 创建或更新 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;
  1. 安装本机平台:
bun add @capacitor/ios @capacitor/android
  1. 添加本机平台文件夹:
bunx cap add ios
bunx cap add android

Capacitor 将创建 ios 和项目根目录下的文件夹，包含了native项目。 android 为了构建Android项目，您需要

Android Studio .对于iOS，您需要一台Mac电脑，Xcode 构建和同步您的项目：.

  1. 这将运行您的自定义脚本，生成静态Nuxt构建并同步文件到native平台。
bun run mobile

构建和部署native应用

为了构建和部署您的native移动应用，请遵循以下步骤：

为了开发iOS应用，您需要

Xcode Xcode 已安装，并且对于 Android 应用程序，您需要安装 Android Studio 已安装。另外，如果您计划将应用程序分发到应用商店，则需要为 iOS 和 Android 分别加入 Apple Developer Program 和 Google Play Console。

  1. 打开本机项目：

对于 iOS：

bun run mobile:ios

对于 Android：

bun run mobile:android

或者直接使用 Capacitor CLI：

bunx cap open ios
bunx cap open android
  1. 构建并运行应用程序：

android-studio-run

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

xcode-run

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

恭喜! 您已经成功部署了 Nuxt 网站应用到移动设备。

nuxtjs-mobile-app

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

Capacitor 实时重载

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

  1. 找到您的本地 IP 地址：

  • 在 macOS 上，在终端中运行以下命令：

    ipconfig getifaddr en0

  • 在 Windows 上运行：

    ipconfig

    在输出中查找 IPv4 地址：

  1. 更新您的 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).

  1. 将更改应用到您的原生项目：
bunx cap copy

The copy 命令将 web 文件夹和配置更改复制到原生项目中，而不更新整个项目。

  1. 启动 Nuxt 开发服务器并在 Xcode/Android Studio 中重建：
bun run dev

现在，每当您对 Nuxt 应用程序进行更改时，移动应用程序将自动重新加载以反映这些更改。

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

使用 Capacitor 插件

Capacitor 插件使您能够从 Nuxt 应用程序访问本机设备功能。让我们通过使用 "Share" 插件作为示例来探索如何使用它们： 使用 __CAPGO_KEEP_0__ 插件 __CAPGO_KEEP_0__ 插件使您能够从 Nuxt 应用程序访问本机设备功能。让我们通过使用 "Share" 插件作为示例来探索如何使用它们：

  1. 安装分享插件：
bun add @capacitor/share
  1. 创建或更新一个页面来使用分享插件。在 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>
  1. 同步更改到原生项目：
bun run mobile

或仅同步而不重建：

bunx cap sync
  1. 重建并在设备上运行应用程序。

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

添加 Konsta UI v5 与 Tailwind CSS 4

为了使按钮看起来更像移动设备，

您需要 Tailwind CSS 4 已经安装.

  1. 安装所需的包：
bun add konsta
bun add tailwindcss @tailwindcss/vite
  1. 配置 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()],
  },
});
  1. 创建 app/assets/css/main.css:
@import 'tailwindcss';
@import 'konsta/theme.css';
  1. 将您的应用程序包装在 Konsta UI 中 App 在 app/app.vue:
<template>
  <App theme="ios">
    <NuxtPage />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>
  1. 更新您的页面以使用 Konsta UI 组件：
<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>
  1. 为 Material Design 主题添加 Roboto 字体在 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
});

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

konsta-nuxt

结论

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

您实现了什么：

  • 配置 Nuxt 以进行静态生成
  • 添加 Capacitor 8 以及必需的插件
  • 在 iOS 和 Android 模拟器上构建和部署
  • 为开发启用了实时重载
  • 可选添加 Konsta UI 以获得原生样式的组件

下一步:

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

开始一个全新的项目？请查看 从零开始构建 Nuxt 移动应用 了解如何使用Capgo。

资源

Learn how Capgo can help you build better apps faster, 注册免费账号 今天

Keep going from Convert Your Nuxt App to iOS &#x26; Android with Capacitor 8

如果您正在使用 Convert Your Nuxt App to iOS &#x26; Android with Capacitor 8 为native插件工作做好准备，连接它 Capgo 插件目录 Capgo 插件目录中的产品工作流程 Capacitor 插件，Capgo Capacitor 插件，Capgo 的实现细节 添加或更新插件 添加或更新插件的实现细节 Ionic企业插件替代品 Ionic企业插件替代品中的产品工作流程 Capgo 本机构建 Capgo 本机构建中的产品工作流程

Capacitor 应用程序的实时更新

当 web 层 bug 活跃时，通过 Capgo 将修复推送，而不是等待几天的应用商店审批。用户在后台接收更新，而本机更改保持在正常审批路径中。

立即开始

博客最新文章

Capgo 为您提供创建真正专业的移动应用所需的最佳见解。

Capacitor 应用程序的双向通信
开发,移动,更新
2025年4月26日

Capacitor应用的双向通信

避免的5种OTA更新常见错误
开发、安全、更新
2025年4月13日

避免的5种OTA更新常见错误

移动应用实时更新的5种安全最佳实践
开发、移动、更新
2025年1月14日

移动应用实时更新的5种安全最佳实践

查看我们的博客中的所有内容