# Capacitor+Vue+Vant移动端打包总结
本笔记为打包
Vue
移动端Android Apk
# 打包步骤
Capacitor
与Vue
项目结合基本配置自行百度/谷歌,这里是已集成配置好的项目。
步骤:
npm run build
打包vue
项目生成dist
目录npx cap sync
同步依赖和拷贝文件dist
下文件到Android
的assets
目录下npx cap open android
自动调用打开Android Studio工具构建项目,编译调试即可。
# Capacitor基本命令
#安装 Capacitor
npm install --save @capacitor/core @capacitor/cli
#初始化 Capacitor,会要求输入 App Name、App ID
npx cap init
#添加 iOS 或 Android 平台
npx cap add ios
npx cap add android
#自动打开 Xcode 或 Android Studio 打包工程。
npx cap open ios
npx cap open android
#拷贝`www`目录到iOS或Android工程
npx cap copy ios
npx cap copy android
#安装插件或依赖后更新iOS或Androd工程的依赖
npx cap update ios npx cap update android
#同步工程包括更新依赖以及拷贝`www`目录,相当于`copy`+`update`
npx cap sync
#打开浏览器测试PWA
npx cap serve
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 问题一
在使用Capacitor打包Android项目上运行该应用程序时遇到问题。 Android Studio拒绝运行项目并显示以下错误:
错误:无法找到脚本“:
xxx\android\capacitor-cordova-android-plugins\cordova.variables.gradle
”它不存在。
# 解决办法
如果您无法在android项目文件夹中找到capacitor-cordova-android-plugins
文件夹,则需要运行capacitor
命令来创建它(并更新插件变量):
npx cap sync
1
通过手动再次同步Gradle
文件可以解决此问题
# 问题二
This version of Android Studio cannot open this project, please retry with Android Studio 3.5 or newer
出现这个问题是因为使用的Gradle版本太高,只需要将gradle降级就可以,或者使用本地还能编译的配置版本替换即可。
classpath 'com.android.tools.build:gradle:3.3.1'
参考Stackoverflow问题 (opens new window)
# 解决办法一
降低
gradle
版本
- 修改
build.gradle
classpath 'com.android.tools.build:gradle:3.3.1'
1 - 修改
gradle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
1
# 解决方法二:
升级
Android studio
版本新版本