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文件,在里面配置证书的一些配置信息

  1. {

  2. "android": {

  3. "release": {

  4. "keystore": "folkmusic.keystore",

  5. "alias": "flokmusic",

  6. "storePassword": "123456",

  7. "password": "123456"

  8. }

  9. }

  10. }

配置好之后以后打包就可以直接执行打包命令 cordova build android --release生成一个代签名的apk文件了。

参考:https://blog.csdn.net/qq_21963133/article/details/88546086

前端VUE项目打包成安卓APP相关推荐

  1. vue项目打包成安卓app

    创建cordova项目 cordova create folkmusic com.music.folkmusic musicapp 将新增项目中的www替换成vue打包出来的build文件 例如:co ...

  2. app vue 真机运行_使用 HBuilder 将 Vue 项目打包成手机 App

    在开发移动端 app 时可以选择原生 app 和 webapp, 原生 app 体验好,开发成本高,相对的 webapp 体验要差,开发成本低.webapp 要求很低,可以说只要会开发web 站就能开 ...

  3. 使用android studio将h5项目打包成安卓app

    android studio 2021.2.1 android 11 首先下载安装 android studio 创建项目,选择 Empty Activity. app图标与名称 制作五组图标,每一对 ...

  4. 教你如何3分钟把VUE项目打包成apk,真的只要3分钟

    前提准备 使用vue-cli3搭建的项目 工具 HBuilder X,他的图标长这个样子,点击下载 做前端的大多数小伙伴们都应该知道,使用起来轻巧.急速,但是他主要是针对于VUE生态打造的,相对于 v ...

  5. web项目打包成Native App

    web项目打包成Native App 好长时间没有写过博客了,闲暇时分静下心来给大家分享一下web项目打包成Native App的小知识,最近公司的web项目都开发到收尾阶段了,也在把web项目打包成 ...

  6. Vue项目打包移动端App(App打包教程),简便直接

    一.Vue项目打包移动端APP 需要准备的工具:Hbuilder 二.首先打包vue到dist目录 npm run build 三.然后再Hbuilder中打开dist目录 首先可以看到dist目录的 ...

  7. vue项目打包成exe可执行文件

    Vue项目打包成exe可执行文件 实现思路:从electron官网上拉取代码,把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html,输入打包e ...

  8. vue项目打包成.exe桌面应用

    1.将vue项目打包成dist文件:npm run build:prod 2.新建文件夹,使用git下载(下载其中一种就行) gitee git clone https://gitee.com/wal ...

  9. (三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串 在public中添加HBuilderX的打包配置文件manifest.json

    Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...

最新文章

  1. 【Android 应用开发】BluetoothServerSocket详解
  2. 网页设计中的默认字体样式详解
  3. java hashmap 去重复_为什么我在Java HashMap中得到重复的键?
  4. TCPIP / LAN、WAN、、VLAN、WLAN 和 WIFI 的区别和联系
  5. Android之 FLAG_ACTIVITY_CLEAR_TASK
  6. GPU CUDA 经典入门指南
  7. 高德sdk_联手HERE,高德进军地图海外市场 | CES 2020
  8. 面试精讲之面试考点及大厂真题 - 分布式专栏 05 公司使用什么RPC框架,聊聊你理解的RPC原理
  9. Centos7内核版安装nginx环境问题及解决方法
  10. 从0到上线一个完整Java项目,需要具备哪些技能?
  11. 连接linux系统的mysql,Linux系统MySQL开启远程连接
  12. 在虚拟宿主环境中承载 Active Directory 域控制器时需要考虑的事项
  13. ubuntu命令行下中文乱码的解决方案
  14. angularjs ngrepeat filter
  15. mac快捷键大全超清示意图动态壁纸
  16. 华擎J3455-ITX黑群晖6.2.3-25426搭建
  17. 公司 | 四年狂奔,少儿编程准独角兽小码王的盈利逻辑是什么?
  18. 最近项目上遇到的问题~
  19. 2022强网杯web方向wp
  20. 苹果ios按键精灵deb包旧版本1.3.8安装方法 --- checkra1n越狱版

热门文章

  1. Linux服务器文字不显示出现小方块、缺少字体的处理方式
  2. Java8-20-lambda 设计模式
  3. proteus与keil的安装方法合集
  4. maven 的生命周期
  5. 赶紧打开花呗看看,你的额度降了没
  6. 精确到区县乡镇街道的行政边界|全国精确到街道乡镇的矢量数据 json、geojson格式
  7. lastlog命令系统安全
  8. 0020-求圆锥的体积
  9. verilog generate 生成语句
  10. 哔哩哔哩(上海)开发实习生(Java方向)面试复盘和答案总结