使用 Capacitor

1. 安装 Capacitor

在 Vue 项目中安装 Capacitor 相关依赖：

1
2

npm install @capacitor/core @capacitor/cli
npx cap init

运行 npx cap init 后，会提示你输入应用名称和包名，按要求填写即可。

2. 添加 Android 平台支持

1

npx cap add android

此命令会在项目中创建一个 android 目录，其中包含 Android 项目的相关文件。

3. 构建 Vue 项目

1

npm run build

该命令会在项目根目录下生成一个 dist 文件夹，里面包含了打包后的静态文件。

4. 将构建文件同步到 Capacitor

1

npx cap sync

这会将 dist 目录中的文件复制到 android 项目的相应位置。

5. 打开 Android 项目并打包 APK （前提：已安装Android Studio）

1

npx cap open android

这将打开 Android Studio 中的项目。在 Android Studio 中，点击菜单栏的 Build -> Build Bundle(s) / APK(s) -> Build APK(s)，等待构建完成后，在 android/app/build/outputs/apk/debug 目录下可以找到生成的 APK 文件。

Android Studio官网：

https://developer.android.google.cn/studio?hl=zh-cn

安装的时候一定要选custom不要选standard！！！！不然C盘爆炸

6. 安装 APK 到安卓设备

将生成的 APK 文件复制到安卓设备上，在设备上找到该文件并点击安装。