Capacitor+Vue+Vant移动端打包总结

本笔记为打包Vue移动端Android Apk

打包步骤

Capacitor与Vue项目结合基本配置自行百度/谷歌，这里是已集成配置好的项目。

1. `npm run build`打包`vue`项目生成`dist`目录

Capacitor+Vue+Vant移动端打包总结_第1张图片

2.`npx cap sync`同步依赖和拷贝文件`dist`下文件到`Android`的`assets`目录下

Capacitor+Vue+Vant移动端打包总结_第2张图片
Capacitor+Vue+Vant移动端打包总结_第3张图片

3. `npx cap open android`

自动调用打开Android Studio工具构建项目，编译调试即可。
Capacitor+Vue+Vant移动端打包总结_第4张图片

Capacitor常用命令

#安装 Capacitornpm install --save @capacitor/core @capacitor/cli#初始化 Capacitor，会要求输入 App Name、App IDnpx 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

在使用Capacitor打包Android项目上运行该应用程序时遇到问题。

问题汇总Tips

Question 1

Android Studio运行项目显示以下错误：

错误：无法找到脚本“：xxx\android\capacitor-cordova-android-plugins\cordova.variables.gradle”它不存在。

Capacitor+Vue+Vant移动端打包总结_第5张图片

解决办法

如果您无法在android项目文件夹中找到capacitor-cordova-android-plugins文件夹，则需要运行capacitor命令来创建它（并更新插件变量）：

npx cap sync

通过手动再次同步Gradle文件可以解决此问题

Question 2

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问题

解决办法一

降低gradle版本

修改build.gradle

classpath 'com.android.tools.build:gradle:3.3.1'

修改gradle-wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

解决方法二：

升级Android studio版本新版本

Question 3

如何解决Android studio错误“ Unfortunately you can't have non-Gradle Java modules and Android-Gradle module?”

解决办法

1、结束项目

2、关闭Android工作区

3、删除.IDEA目录

4、删除所有.iml文件

find . -name "*.iml" | xargs rm -rf

5、打开android studio并导入该项目

Question 4

gradle3.3.0后，variant.getJavaCompile()和variantOutput.getPackageApplication()警告的原因：2019年后将移除。

API 'variant.getJavaCompiler()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'.

Capacitor+Vue+Vant移动端打包总结_第6张图片

解决办法

更多见https://stackoverflow.com/questions/52470044

Question 5

Android studio打包build生成带签名的Apk
Generating Signed Bundle/APK 出错,此问题一般为gradle版本造成

Error: Entry name 'res/color/material_on_surface_disabled.xml' collided

解决方法

    dependencies {    // 降低gradle版本3.6.2为3.4.0        classpath 'com.android.tools.build:gradle:3.4.0'        classpath 'com.google.gms:google-services:4.2.0'        // NOTE: Do not place your application dependencies here; they belong        // in the individual module build.gradle files    }

Capacitor+Vue+Vant移动端打包总结