前端VUE项目打包成安卓APP
1.打包vue项目,在项目的根目录执行命令 npm run build,直至项目打包完成
打开dist文件件,里面有一个index.html和static文件夹。
2.新建cordova项目
2.1安装cordova,命令行执行 npm install -g cordova
2.2利用cordova创建一个新项目,命令行执行 cordova create folkmusic com.music.folkmusic musicapp
folkmusic是项目名称,com.music.folkmusic是包名,musicapp是程序的标题
cordova的目录结构如下所示:
将刚才在vue项目中打包生成的dist文件夹下面的index.html和static文件夹复制到www文件夹下面,将原先www文件夹下面的所有文件删除。
3.打包cordova项目,在根目录执行命令 cordova platforms add android --save
命令执行成功之后会在platforms文件夹下面生成如下的目录
可以在项目根目录下面执行 cordova run android运行(需要真机或模拟器)
4.在根目录下执行 cordova build android生成apk文件
上图红色部分即为所生成的apk文件的路径
这样生成的apk是不能安装使用的,下面介绍如何生成签名的apk文件
5.检查环境是否已经准备就绪,执行命令 cordova requirements
根据提示安装所缺少的环境(sdk和jdk)
关于jdk和sdk环境变量的安装这里不再做说明,读者可以自行百度。检查jdk和sdk是否配置成功,在命令行执行java 和 adb命令即可
配置好环境再次检查会得到如下结果
6.打包apk
6.1生成签名证书
在命令行执行
keytool -genkey -v -keystore folkmusic.keystore -alias flokmusic -keyalg RSA -validity 36500
其中folkmusic.keystore代表所生成的证书文件名的所在目录(直接写名字代表当前目录),folkmusic代表别名,不写默认为mykey,RSA代表才用RSA算法,36500代表证书的有效期天数
然后根据提示输入所需录入的信息
成功之后会在目录下面生成一个证书文件
6.2apk签名
签名的方式有两种:
1.生成未签名的debug版本的apk,然后再用命令进行签名
在根目录执行命令 cordova build android --release
成功之后会在release目录下面生成一个app-release-unsigned.apk的文件
将签名所生成的证书文件复制到该目录之下执行命令 jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore folkmusic.keystore app-release-unsigned.apk folkmusic
如果出现找不到证书链多半是证书的别名写错了。笔者就是前期的别名取得是flokmusic后面输入的是folkmusic而出错。
2.直接生产签名的apk文件
在命令行执行
cordova build android --release --keystore="folkmusic.keystore" --alias=flokmusic --storePassword=123456 --password=123456
同样会在release目录下面生成一个apk文件,并且是已经签名了的文件。
在我们的项目开发中,如果每次都输入这样一长串的命令未免太过麻烦,在cordova项目中,我们可以通过配置来快速生成带签名的apk文件
在项目的根目录下面新建一个build.json文件,在里面配置证书的一些配置信息
{
"android": {
"release": {
"keystore": "folkmusic.keystore",
"alias": "flokmusic",
"storePassword": "123456",
"password": "123456"
}
}
}
配置好之后以后打包就可以直接执行打包命令 cordova build android --release生成一个代签名的apk文件了。
参考:https://blog.csdn.net/qq_21963133/article/details/88546086
前端VUE项目打包成安卓APP相关推荐
- vue项目打包成安卓app
创建cordova项目 cordova create folkmusic com.music.folkmusic musicapp 将新增项目中的www替换成vue打包出来的build文件 例如:co ...
- app vue 真机运行_使用 HBuilder 将 Vue 项目打包成手机 App
在开发移动端 app 时可以选择原生 app 和 webapp, 原生 app 体验好,开发成本高,相对的 webapp 体验要差,开发成本低.webapp 要求很低,可以说只要会开发web 站就能开 ...
- 使用android studio将h5项目打包成安卓app
android studio 2021.2.1 android 11 首先下载安装 android studio 创建项目,选择 Empty Activity. app图标与名称 制作五组图标,每一对 ...
- 教你如何3分钟把VUE项目打包成apk,真的只要3分钟
前提准备 使用vue-cli3搭建的项目 工具 HBuilder X,他的图标长这个样子,点击下载 做前端的大多数小伙伴们都应该知道,使用起来轻巧.急速,但是他主要是针对于VUE生态打造的,相对于 v ...
- web项目打包成Native App
web项目打包成Native App 好长时间没有写过博客了,闲暇时分静下心来给大家分享一下web项目打包成Native App的小知识,最近公司的web项目都开发到收尾阶段了,也在把web项目打包成 ...
- Vue项目打包移动端App(App打包教程),简便直接
一.Vue项目打包移动端APP 需要准备的工具:Hbuilder 二.首先打包vue到dist目录 npm run build 三.然后再Hbuilder中打开dist目录 首先可以看到dist目录的 ...
- vue项目打包成exe可执行文件
Vue项目打包成exe可执行文件 实现思路:从electron官网上拉取代码,把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html,输入打包e ...
- vue项目打包成.exe桌面应用
1.将vue项目打包成dist文件:npm run build:prod 2.新建文件夹,使用git下载(下载其中一种就行) gitee git clone https://gitee.com/wal ...
- (三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串 在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
最新文章
- 【Android 应用开发】BluetoothServerSocket详解
- 网页设计中的默认字体样式详解
- java hashmap 去重复_为什么我在Java HashMap中得到重复的键?
- TCPIP / LAN、WAN、、VLAN、WLAN 和 WIFI 的区别和联系
- Android之 FLAG_ACTIVITY_CLEAR_TASK
- GPU CUDA 经典入门指南
- 高德sdk_联手HERE,高德进军地图海外市场 | CES 2020
- 面试精讲之面试考点及大厂真题 - 分布式专栏 05 公司使用什么RPC框架,聊聊你理解的RPC原理
- Centos7内核版安装nginx环境问题及解决方法
- 从0到上线一个完整Java项目,需要具备哪些技能?
- 连接linux系统的mysql,Linux系统MySQL开启远程连接
- 在虚拟宿主环境中承载 Active Directory 域控制器时需要考虑的事项
- ubuntu命令行下中文乱码的解决方案
- angularjs ngrepeat filter
- mac快捷键大全超清示意图动态壁纸
- 华擎J3455-ITX黑群晖6.2.3-25426搭建
- 公司 | 四年狂奔,少儿编程准独角兽小码王的盈利逻辑是什么?
- 最近项目上遇到的问题~
- 2022强网杯web方向wp
- 苹果ios按键精灵deb包旧版本1.3.8安装方法 --- checkra1n越狱版