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 iosnpx cap copy android #安装插件或依赖后更新iOS或Androd工程的依赖npx cap update ios npx cap update android #同步工程包括更新依赖以及拷贝`www`目录，相当于`copy`+`update`npx cap sync#打开浏览器测试PWAnpx 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.gradleclasspath 'com.android.tools.build:gradle:3.3.1'修改
gradle-wrapper.propertiesdistributionUrl=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.0classpath '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移动端打包总结相关推荐
- html5地区级联选择,【JS】vue+vant移动端地区级联选择组件
首页 专栏 javascript 文章详情 0 vue+vant移动端地区级联选择组件 quanta发布于 今天 08:25 写在开头:项目的框架是vue+vant,业务需求一个级联的地区选择,写完才 ...
- vue+vant 移动端H5 商城项目_04
文章目录 一.专题页 1. 效果图 2. 专题api 2.Topic.vue 组件 3. 专题源码 二.分类页 2.1. 效果图 2.2. 分类api 2.3. Category.vue 组件 三.购 ...
- vue+vant 移动端H5 商城项目_03
文章目录 一.·首页搜索功能 1. 搜索页面 2. 历史记录和热门搜索组件 3. 搜索框提示列表组件 4. 综合-价格-分类 5. 搜索出的产品展示 6. 异常修复 7. 路由拦截/路由守卫 二.详情 ...
- vue+vant 移动端H5 商城项目_02
文章目录 一.路由规划 1. 新建路由配置 2. 下载vue-router 3. 路由注册 4. 路由基础配置 5. 路由挂载 6. AppTabBar 7. 二.移动端首页 2.1.首页效果 2.2 ...
- vue+vant 移动端H5 商城项目_01
文章目录 一.·Rem 布局适配 1. 安装 amfe-flexible 2. px转化rem 3. 全局配置 4. 重置样式表 5. 引入重置样式表 二.组件安装和配置与封装 2.1. 安装less ...
- 最新vue+vant移动端电商项目
今天为大家带来一个Vue+VantUi完成的一个一个移动端电商项目,供大家学习和参考. 源码已上传到码云上面https://gitee.com/jiuyueqi/vyx, 如果有需要源码或者接口文档的 ...
- VUE Vant移动端开发
Vant 什么是Vant Vant是一个轻量,可靠的移动端组件库,2017开源 目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付 ...
- vue+vant 移动端国际区号组件封装
1.组件 <template><div><van-nav-bar title="Select Country/Region" left-arrow @ ...
- 小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
最新文章
- java取路径含中文_java获取项目路径中文乱码
- PHP MySQL学生宿舍管理系统源代码_php高校学生宿舍管理系统
- 利用Office加载项进行持久化控制的6种姿势
- Page.IsValid 属性
- java 正则 html 标签_Java正则 HTML 标签 得到 纯文本
- html论坛注册代码,Discuz!论坛代码大全和HTML代码大全 | 穆小刚营销博客
- 如何用手机制作电子版证件照？
- 自然语言处理总复习（七）—— 概率上下文无关文法
- 洛谷p3376 网络流最大流模板题
- icom对讲机写频线定义_哈罗CQ火腿社区 - QRP and DIY - 各种写频线的资料，放上来备用吧 - Powered by phpwind...
- L1 和 L2的区别
- C++ 模板的显示具体化
- MySQL 数据库语句基础
- 今日头条2018校招测试开发方向（第一批）详解
- manjaro deepin 闪屏_微信聊天“闪屏”特效，整蛊效果100分！
- MFC获取主机IP地址
- FISCO BCOS 2022年度贡献者榜单
- 第一单元测试问星卷计算机,【第一单元综合测试卷测量】第一单元综合测试卷答案...
- 程序员必须学会的《软技能》
- 调整字体间距属性和文字换行属性