Vue 前端项目打包安卓 APK 攻略:Capacitor 零基础打包教程

B站影视 日本电影 2025-08-13 00:40 4

摘要:打包 APK 需预先安装 Android Studio,网上有很多教程,随便找一个照着安装即可。

打包 APK 需预先安装 Android Studio,网上有很多教程,随便找一个照着安装即可。

npm install @capacitor/core @capacitor/clinpm install @capacitor/Android

在 package.json 中,可以将 capacitor 相关的包放在 dev 库中,避免打包干扰

package.json 片段

将 vue3 的 dist 目录配置为 Capacitor 的 web 目录

修改 capacitor.config.json 中信息,webDir 即为静态文件的文件夹,vue 项目一般都设置为 dist

修改 capacitor.config.json

添加 Android 打包文件

npx cap add android

生成的 android 文件中, android\gradle\wrapper\gradle-wrapper.properties 文件会下载 gradle 文件,由于是从 github 下载且 github 不稳定,这里可以提前下载并将下载地址指向本地文件,比如:

指定 gradle 下载地址到本地

首先将前端打包

npm run build

打包命令请以 package.json 中的脚本为准,不一定是 npm run build

将新生成的 dist 目录更新覆盖到 android 文件下

npx cap copy android

启动 Android Studio 构建 APK

npx cap open android

等待 Android Studio 项目扫描完成

完成后,点击 menu - build - build apk

等待 APK 构建完成。

注意:这里构建的 APK 为开发版,如果要构建发布版见下文。

构建完成!

选择如下菜单

选择 APK

填写应用信息并选择应用 key

如果没有 key 可以选择 Create new...,填写好应用信息并生成。

生成 key

选择 release 版,点击创建

等待安装包构建完成

完成!

来源:每天一点计算机小知识

相关推荐