现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题。
现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只需要一条命令就可以完成打包。

1.安装cordova
这一步的前提是已经完成安装node和npm,如果没有安装的话,请先完成node和npm的安装。
node安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装。安装之后在命令行中使用”node -v” 检查安装是否成功。
npm安装:由于新版的nodejs已经集成了npm,所以node安装时npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。
使用命令

npm install -g cordova

来全局安装cordova,安装成功之后,使用命令

cordova -v

来检查是否正确安装,正确安装会显示安装的cordova版本号。

2.新建cordova项目
执行命令

cordova create myApp1 org.apache.cordova.myApp myApp2
cd myApp1

来新建cordova项目,初始化cordova开发环境。
其中:
myApp1:cordova目录名
org.apache.cordova.myApp: 包名
myApp2: 项目名(在config.xml中查看)
生成的cordova文件中
*config.xml -包含应用相关信息,使用到的插件以及面向的平台

platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库

plugins – 包含应用所需插件的 Cordova 库,使得应用能够访问例如照相机和电池状态相关的事项。

www – 包含应用源代码,例如 HTML, JavaScript 和 CSS 文件

hooks – 包含为个性化应用编译系统所需的脚本*

使用命令

cordova platform add android

来生成Android平台的cordova库,这时platforms文件夹中会生成一个android文件夹。
到这里,cordova项目就已经建好了。

3.新建vue项目
为了方便,不需要每次编译都拷贝文件,可直接在cordova项目根目录中创建vue项目。
首先全局安装Vue-cli脚手架。

npm install -g vue
npm install -g vue-cli

然后使用命令

vue init webpack MyApp

新建vue项目。完成之后的目录如下所示。


到这里,vue项目即构建完成。

4.修改文件
修改Vue项目config/index.js文件.

5.编译vue项目
在vue项目根目录执行命令

npm run build

即可编译vue项目自动到cordova主目录下的www文件夹中。

6.调试打包apk软件
调试打包软件之前,首先检查androidsdk是否正确安装,执行命令

cordova requirements

即可看到当前环境中sdk安装情况。显示如下即表示环境正确安装。(只需确认正确安装即可,不需每次都去检查)

在cordova主目录下使用命令

cordova run android

来联调android软件(需连接真机或者模拟器)。
执行命令

cordova build android

来打包成apk软件(…/cordovaApp/platforms/android/app/build/outputs/apk/debug/app-debug.apk)。

7.APK签名
APK都必须经过数字签名后才能安装到设备上,签名需要对应的证书(keystore),大部分情况下 APK 都采用的自签名证书,就是自己生成证书然后给应用签名。
数字签名证书是给APK打包所必需的文件,所以我们先要把数字签名证书生成。
在命令提示符下输入

keytool -genkey -v -keystore D:\mytest.keystore -alias mytest -keyalg RSA -validity 20000

*-keystore D:/mytest.keystore表示生成的证书及其存放路径,如果直接写文件名则默认生成在用户当前目录下;
  -alias mytest 表示证书的别名是mytest,不写这一项的话证书名字默认是mykey;
  -keyalg RSA 表示采用的RSA算法;
  -validity 20000表示证书的有效期是20000天。*
根据指令输入密钥库口令,是不可见的。依次输入下面的问题。最后到【否】那里时输入y
再输入密钥口令(可以与密钥库口令相同),如果相同,直接回车,记住这两个口令,后面签名会使用到。
这时便会生成一个文件mytest.keystore,就是我们需要的签名文件。

生成带签名的apk有两种方式,一种先生成未签名debug版本,再加上数字签名证书然后生成带签名的APK。另外一种就是直接一条命令生成带签名的APK。
(1)先生成未签名的debug版本的apk
首先执行命令

cordova build android --release

, 就会生成一个app-release-unsigned.apk。把数字签名放到生成的未签名的apk所在的目录下,输入以下命令:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore mytest.keystore app-release-unsigned.apk mytest

这时的apk就会是一个已经签名的apk了,修改一下名字即可直接放到设备上安装。


(2)直接生成带签名的apk
有了数字签名之后,数字签名需要放在cordova项目根目录下或者可以修改下面指令的keystore里的路径可以直接在cordova build中指定所有参数来快速打包,这会直接生成一个android-release.apk(已经是带签名的了)

cordova build android --release --keystore="mytest.keystore" --alias=mytest --storePassword=testing --password=testing1

keystore 后面是数字签名证书, –alias 后面是别名 storePassword 后面是密钥库口令 password 后面是密钥口令
注意:命令中口令要替换成自己的,就是生成签名是需要记住的那两个口令


但每次打包输入命令行参数是很重复的,Cordova 允许我们建立一个 build.json 配置文件来简化操作。在cordova根目录新建文本文档,改名为build.json。

文件内容如下

    {”android”: {”release”: {”keystore”: “mytest.keystore”,”alias”: “mytest”,”storePassword”: “testing”,”password”: “testing2”}  }}


但下面的两个密码建议不要写到里面去,可以去掉然后手动输入。

直接使用
cordova build –release
就可以生成带签名的apk了


注意:cordova build后面没有android

如果这篇文章对你的工作或者学习有帮助的话,请收藏或点个赞。如果对其中有什么不明白的或者报错,可以留言或者加QQ群140455228交流。

注意:请支持原创,本文谢绝转载,确有需要可链接到本文。本文链接地址:https://segmentfault.com/a/11...

cordova+vue 项目打包成Android(apk)应用相关推荐

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

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

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

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

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

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

  4. vue 使用window的对象_如何3分钟把VUE项目打包成apk

    必要条件 使用vue-cli3搭建的项目 工具 HBuilder X,他的图标长这个样子,下载地址:https://www.dcloud.io/hbuilderx.html 做前端的大多数小伙伴们都应 ...

  5. Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样

    场景 electron-vue 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码. 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序 ...

  6. Cordova将vue项目打包成apk(全使用命令行)

    场景 假设vue项目已经搭建好,要将其打包成apk. 实现 编译vue项目 在vue项目目录下打开cmd,输入: npm run build 新建cordova项目 来到要新建cordova项目的目录 ...

  7. Cordova打包教程知识体系整理(Vue项目打包成ipa)

    使用工具: 1.Webstorm2017 Webstorm2017安装以及破解和汉化: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...

  8. 通过cordova将vue项目打包成app

    准备工作包括nodejs.cordova.AndroidStudio. 一.创建一个cordova工程 cordova create cordovaVue cd cordovaVue config.x ...

  9. vue项目打包成apk安装包详细步骤

    第一步 : 下载HbuilderX DCloud官网 HBuilderX下载地址 第二部 : 创建5+App项目 完事点创建 得到这么个玩意 把没用的都干掉,留下manifest.json就行了 然后 ...

最新文章

  1. SQL查询数据并插入新表
  2. MyBatis 源码解读-reflectorFactoryElement()
  3. 透彻理解回文~单链表的逆序~
  4. 关于用Java写的贪吃蛇游戏的一些感想
  5. 转 CSS 打印:http://eblog.nenu.edu.cn/user1/easter/archives/2008/1864.html
  6. 基础算法之插入排序Insertion Sort
  7. JavaScript模块知识理解
  8. 计算机科学与技术专业实训手册,计算机专业实习工作手册.doc
  9. 360与百度的竞争分析
  10. GPU cuda驱动安装
  11. 文档翻译——免费版(word格式、pdf格式)
  12. 微信公众号开发--实现扫码关注公众号自动登录网站
  13. Appium+python自动化(三十二)- 代码写死一时爽,框架重构火葬场 - PageObject+unittest(超详解)...
  14. ai的布尔运算在哪_在AI中如何进行布尔运算
  15. (三)Grahpics之Blit
  16. 40岁开始学编程,现在成了一名技术主管
  17. python软件和rost软件哪个更好_ROST-CM软件分词和词频统计用法体验
  18. Netty下的消息群发
  19. python自动发送短信验证码、短信通知、营销短信、语音短信
  20. 利用百度(或者360搜索等)的快照解决公司网络限制

热门文章

  1. html5晋级之路-css背景
  2. Android应用【世界杯知识答题】的界面设计经验
  3. 用VC创建程序启动画面
  4. (原)举例说明C#自定义配置文件app.config及如何读取配置内容(在app.config加入自定义的XML节点)?...
  5. jQuery教程05-层级选择器
  6. Linux CentOS6离线安装Jupyter notebook
  7. matlab自考本科真题,行政管理学自考专科试题及答案
  8. java内容寻址_java – 获取方法对象而不按名称寻址方法
  9. c++ 返回智能指针_C++核心指南(17) I.11 禁止使用指针(T*)或引用(T)来转移所有权...
  10. oracle+循环插入sql,SQL server,Oracle循环插入百万数据