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

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

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

打包步骤

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

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

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

3. ​​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

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

问题汇总Tips

Question 1

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

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

• 解决办法

如果您无法在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()'.

• 解决办法
  
  ​​​更多见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
    }