Capacitor打包electron为apk

1.安装

复制代码
安装 Capacitor 核心库

npm install @capacitor/core @capacitor/cli

初始化 Capacitor 配置
npx cap init

运行命令会提示输入
App Name: 你的应用名称

App ID: 应用的唯一标识,通常采用反向域名格式 com.mycompany.myapp

2.安装 Android 平台并添加项目,根目录下出现android目录和capacitor.config.ts配置文件,会复制前端打包的文件,默认目录为dist

复制代码
npm install @capacitor/android
//将打包内容添加到andriod中形成安装的项目文件,如果之前没达包会报错
npx cap add android
//每次更新后使用更新最新的内容到安装的项目
npx cap sync android

如果打包目录不是dist,修改配置文件capacitor.config.ts

复制代码
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.apple.cooking',
  appName: 'cooking',
  webDir: 'out/renderer'//文件位置
};

export default config;

3.下载安卓sdk(已有java环境

去android studio下载最新版,并下载sdk

在android 文件夹下创建文件local.properties,记事本打开,输入sdk的路径

复制代码
sdk.dir=D:/AndroiSdk

4.命令行打包测试apk

复制代码
./gradlew assembleDebug

5.在项目/\android\app\build\outputs\apk\debug下有apk文件

6.安装sqlite数据库

1.安装sqlite

复制代码
npm install @capacitor-community/sqlite
npx cap sync

2.安装适配electron的jeep-sqlite>

复制代码
npm install @capacitor-community/sqlite @jeep-sqlite/dom

3.配置jeep-sqlite>

重新同步,打包

相关推荐
午安~婉3 天前
Electron桌面应用(续3)
前端·javascript·electron·重构通用模型·异步可迭代对象
午安~婉3 天前
Electron桌面应用(续2)
前端·javascript·electron·路由守卫·优化llm返回的内容
垚森5 天前
我用AI写了一个颜值拉满的桌面媒体播放器,全程没动一行代码,这就是AI编程新范式
ai·electron·react·opencode
光影少年5 天前
前端开发桌面端都有哪些框架?
前端·react.js·electron
萑澈6 天前
Windows 7 运行 Electron 安装包报“不是有效的 Win32 应用程序”怎么办
javascript·windows·electron
你的牧游哥6 天前
Electron核心api详解
前端·javascript·electron
jingxindeyi7 天前
electron 配置 shadcn-ui
javascript·ui·electron
天天进步20157 天前
[前端篇] 桌面端与 AI 的碰撞:Toonflow 基于 Electron 的高效交互实现
前端·人工智能·electron
浩星8 天前
electron系列9:调用原生能力,剪贴板、通知、开机自启
前端·javascript·electron
浩星8 天前
electron系列8之Electron + Vue 3:构建现代化桌面应用(下)
前端·vue.js·electron