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

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

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

打包步骤

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

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

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

2.npx cap sync同步依赖和拷贝文件dist下文件到Androidassets目录下

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

3. npx cap open android

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

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”它不存在。

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张图片

  • 解决办法
    Capacitor+Vue+Vant移动端打包总结_第7张图片
    更多见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
    }

你可能感兴趣的:(Vue,Android,vue,android)