2024‎年‎9‎月‎22‎日，‏‎10:10:40

Vue+Capacitor转Android

前置条件：JDK + Gradel + Android Studio

1. 安装Capacitor

   npm install @capacitor/core @capacitor/cli
   # 若遇到网络问题，请配置镜像源：npm config set registry https://registry.npmmirror.com
   # 若出现版本冲突，使用强制命令安装：npm install @capacitor/core @capacitor/cli --legacy-peer-deps
   

2. 安装 Capacitor Android

   npm install @capacitor/android
   # 强制安装：npm install @capacitor/android --legacy-peer-deps
   

3. 初始化 Capacitor

   # [appName] 是你的应用名称
   # [appId] 是应用的唯一标识（通常是反向域名格式，如 com.example.app）
   npx cap init [appName] [appId] 
   

4. 添加 Android 平台

   npx cap add android
   

5. 构建 Vue 项目

   npm run build
   

6. 复制构建文件到 Capacitor

   npx cap copy
   

7. 打开 Android Studio

   npx cap open android
   

   可能遇到的问题：

   Gradle构建项目缺少文件(可能和vue版本有关，低版本会少构建文件)：

   1. Could not read script 'E:\VS Code\Project\CPA_frontend_management\android\capacitor.settings.gradle' as it does not exist
      **解决方法：**在 android/目录下，新建一个名为 capacitor.settings.gradle 的文件，内容如下：// Capacitor settings file

   2. Project with path ':capacitor-android' could not be found in project ':app'

      **解决方法：**确保 android/settings.gradle 文件包含以下内容：

      // Include capacitor-android project
      include ':capacitor-android'
      project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android')
      

      再使用
      

      npx cap sync来同步项目文件即可

8. 构建 APK

在 Android Studio 中，通过菜单选择

Build > Build Bundle(s)/APK > Build APK(s) 来生成 APK 文件。

文件位置：app/build/outputs/apk/debug/app-debug.apk

(在Android Studio中不显示build文件夹，需自行去资源管理器中寻找)