VUE- Cordova打包APP _cordova

知识为进步之母,而进步又为富强之源泉。这篇文章主要讲述VUE- Cordova打包APP相关的知识，希望能为你提供帮助。
VUE- Cordova打包APP
现在使用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” 来测试是否成功安装。

以管理员身份运行 CMD 控制台

使用命令

npm install -g cordova

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

cordova -v

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

2.新建cordova项目

执行命令

cordova create myApp1 org.apache.cordova.myApp myApp2

来新建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 – 包含为个性化应用编译系统所需的脚本

配置依赖环境【VUE- Cordova打包APP】1. gradle（一般情况下不需要手动安装）
地址：https://services.gradle.org/distributions/
地址：https://www.jianshu.com/p/d9329117aa2f
本文中下载的 gradle-6.0-all
解压到：D:\\gradle-6.0
配置环境变量：

新建-> 变量 GRADLE_HOME，变量值为gradle的路径：D:\\gradle-6.0
修改-> 变量 Path，即追加 "%GRADLE_HOME%\\bin"

文章图片

2. 安装java sdk
地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
地址（java8）：https://www.cnblogs.com/zhangzhixing/p/12953187.html
安装位置：C:\\Program Files\\Java

文章图片

配置环境变量
系统变量
新增变量名：JAVA_HOME ，变量值：C:\\Program Files\\Java\\jdk1.8.0_40
修改-> 变量 Path，即追加 "%JAVA_HOME%\\bin"

文章图片

3. android 环境
安装 android studio ，配置 ADNROID SDK

文章图片

文章图片

选择要安装的 android 版本
默认安装地址：C:\\Users\\tyzh\\AppData\\Local\\Android\\Sdk
配置环境变量
系统变量：
新建变量名：ANDROID_HOME，变量值：C:\\Users\\tyzh\\AppData\\Local\\Android\\Sdk
编辑-> 变量path，值为"; %ANDROID_HOME%\\platform-tools; %ANDROID_HOME%\\tools"

文章图片

Path追加：

文章图片

4. 增加系统环境变量
配置环境变量
系统变量：
编辑-> 变量path，增加 “C:\\Windows\\System32”
否则添加android平台时会失败

5. 依赖环境搭建完成后，需要重启

进入项目

cd myApp1

使用命令，执行有点慢，稍等一会就好。

cordova platform add android@^9.0.0

去除android平台时，命令：cordova platform remove android

来生成Android平台的cordova库，这时platforms文件夹中会生成一个android文件夹。

文章图片

到这里，cordova项目就已经建好了。

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

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

文章图片

文章图片

新建VUE项目

vue init webpack MyApp

文章图片

文章图片

完成之后的目录如下所示。

文章图片

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

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

文章图片

进入项目

cd MyApp

运行项目

npm run init

npm run dev

文章图片

打开地址：http://localhost:8081

文章图片

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

npm run build

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

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

cordova requirements

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

文章图片

在cordova主目录下使用命令

cordova run android

来联调android软件（需连接真机或者模拟器）。

执行命令

cordova build android

来打包成apk软件（…myApp1/platforms/android/app/build/outputs/apk/debug/app-debug.apk）。

文章图片

文章图片

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

需要安装Java JDK（建议8.0以上）
使用keytool工具生成证书：keytool已经集成在JDK中了。我们只需要在命令提示符窗口中输入相应的指令及信息即可快速生成数字证书，具体做法为：
在命令行中输入如下指令：

keytool -genkey -v -keystore E:\\VUEPROD\\recordmy\\platforms\\android\\app\\build\\outputs\\apk\\release\\recordmy.keystore -alias recordmy -keyalg RSA -validity 30000

(1)keytool代表工具名称（固定写法，不改变）
(2)-genkey意味着执行的是生成数字证书操作（固定写法，不改变）
(3)-v表示将生成证书的详细信息打印出来，显示在dos窗口中
(4)-keystore recordmy.keystore表示生成的证书的文件名为"recordmy.keystore"(根据需求，设置你的证书名)
(5)alias recordmy.keystore表示证书的别名为"recordmy.keystore"。(一般设置和上面的文件名相同，当然可以设置不同的别名)
(6)-keyalg RSA表示生成密钥文件所采用的算法为RSA(固定写法，不改变)
(7)-validity 3000代表该数字证书的有效期为30000天，30000天之后该证书将失效

在执行上面的指令生成证书文件时，会如下图提示你输入一些信息，包括证书的密码等
本文中密码设置为：recordmy