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
    }