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>

重新同步,打包

相关推荐
ZengLiangYi2 小时前
PPT Timer:一个置顶于PPT全屏放映之上的LCD倒计时器
electron
一拳不是超人9 天前
Electron主窗口弹框被WebContentView遮挡?独立WebContentView弹框方案详解!
前端·javascript·electron
柯南952713 天前
Electron 无边框窗口拖拽实现
vue.js·electron
卸任13 天前
Windows判断是笔记本还是台式
前端·react.js·electron
一拳不是超人13 天前
Electron 实战全解析:基于 WebContentView 的多视图管理系统
前端·javascript·electron
lpfasd12317 天前
Tauri vs Electron:高质量Word/PDF导出效果深度对比
electron·pdf·word
卸任18 天前
Electron判断是内置摄像头还是接摄像头
前端·react.js·electron
一文解千机21 天前
wine 优化配置及显卡加速,完美运行Electron 编译的程序(新榜小豆芽、作家助手、小V猫等)
linux·ubuntu·electron·wine·wine优化配置·wine显卡加速·wine大型游戏
weixin_4255437325 天前
TREA CN 3.3.30 + GLM-5 王炸更新
ai·electron