Cordova+Vue打包APP

打包APP步骤：（除非特殊说明，如下步骤均为Windows环境）

1.安装node环境
2.安装cordova插件
3.配置安卓的SDK和JDK环境变量（Android），配置iOS的xcode环境（iOS）
4.整合vue到cordova

安装node环境：

首先去官网下载node.js，传送门node.js下载地址，推荐下载长期支持版

Node.js下载完成以后，一步步默认安装就能够，安装完成以后，能够用命令行node -v 检测一下是否是安装成功了，若是出现下图相似信息，证实安装成功了。

当node环境安装成功以后，已经默认安装了npm包，这里也能够用命令行npm -v 检测一下，出现下面状况证实已经安装成功：

安装cordova：

cordova是一个npm包，咱们能够经过命令行npm安装，命令以下：
npm install -g cordova

安装完cordova以后，就能够新建cordova项目了，命令行以下：
cordova create myApp com.myCompany.myApp myApp

其中com.myCompany.myApp是包名，第一个myAPP是项目名，最后一个myAPP，我猜是打包出来的应用名称，直接用cordova create myAPP也是能够的，不过这时候，包名和应用名会用cordova默认的内容，如今来看一下项目目录：

platforms: 添加iOS或者Android项目目录

plugin： 项目中使用到的一些插件，好比有时候咱们须要用到原生的相机功能，就须要添加一个cordova-plugin-camera 插件，这个插件的安装目录就是plugin

www： 要打包的静态文件，也就是咱们的HTML、js和css等相关文件放置的文件夹

config.xml： cordova打包的一些配置项，有些状况下咱们会须要在里面添加一些东西，好比使用相机的时候，iOS平台下插件使用会存在一些问题，就须要在这里配置

package.json： 和vue项目中的package.json相同，安装包依赖项

配置安卓的SDK和JDK环境变量

在Windows下打包apk，SDK和JDK环境变量都是必须的，能够单独安装SDK和JDK，不过推荐经过安装Android Studio安装SDK，由于后期能够经过Android Studio进行模拟机进行调试，也能够完成一些.jar包的安装，Android Studio，JDK
下图是JDK的下载界面，不过这个是11，想要低一些的稳定版本能够页面往下拉，有8和7，我安装的是8.

两个东西都安装完以后，进行环境变量的配置，传送门：JDK的安装与环境变量配置

SDK的安装： 网上不少给出的教程都是安装Android Studio的时候，能一块儿把SDK给安装了，可是在比较新的版本中，Android Studio安装选项中是没有SDK安装选项的，因此须要在安装完Android Studio以后，手动的安装SDK。

打开Android Studio以后，有一个工具栏有一个Tools选项，点开以后能看到SDKmanager选项，如图所示，点开

点开SDK Manager以后，把SDK安装一下，能够看到有一个Android SDK Location，这个记一下，设置环境变量的时候要用

还在当前界面，切换SDK Platforms到SDK Tools，而后把界面里面没有勾选过的东西勾选安装一下。

SDK环境变量设置

第一步：添加 ANDROID_HOME

新建系统变量 ANDROID_HOME

变量名：ANDROID_HOME 变量值：D:\Android\SDK（就是以前咱们配置时记的SDK的文件夹目录）

第二步：添加Path变量

此变量已存在，直接编辑便可

变量值：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

（注意：win10下要分行编辑，且末尾没有分号）

添加完成，确认保存
最后验证一下，打开cmd命令行窗口，分别输入： adb android 两个命令进行验证，都没有出错，则配置成功。

配置成功以后，就能打包咱们的apk了，在项目目录下运行命令行：
cordova platform add android
cordova build android
若是一切顺利的话，这时在咱们的myApp1\platforms\android\app\build\outputs\apk\debug目录下，就能看到生成的app-debug.apk了，能够安装到手机看一下，也能够打开Android Studio用模拟机运行，至此，cordova打包apk算是完成了。

若是这一步不顺利的话，多是有一些包咱们没有安装，能够打开Android Studio，里面会有提示安装，安装就能够了。

模拟机中运行步骤大体是，当项目导入Android Studio成功以后，项目目录就是platform文件下的Android目录，目录如图：

打开的Android Studio工具栏下面会有一个选项栏，如图：

选项栏里的绿色三角按钮，就是打开运行项目打开虚拟机的开关，第一次点击的时候，会让选择虚拟机款式，并进行配置，按照喜爱选就能够了，最后会出现安装着咱们生成的apk的虚拟手机，默认会打开当前生成APP首页。

从生成的包名字能看到，咱们获得的是一个debug包，和它对应的还有一个release版本，release版本就是能够上传到应用商店的发行版本，能够经过运行cordova build android --release获得，试一下你会发现获得的包后面有一个unsigned标识，而且它不能安装，由于缺乏证书。

因此打出一个生产的包，咱们还须要一个证书。Android的证书很容易获取，在Android Studio里面或者命令行均可以，不过Android生成的证书是.jks格式，这种适用性没有.keystore格式的普遍，因此推荐用命令行生成，不过相关的密码必定要记得，都是要用的，密码记不住的话，证书名要记得，这样能够找回密码。传送门：命令行生成keystore
这些作完以后，能够在cordova项目文件夹，也就是项目的根目录下新建一个build.json文件，把相关的配置写在里面，示例配置以下：

{
  "android": {
    "release": {
      "keystore": "D:/ASWS/winter.keystore",
      "alias": "witner.keystore",
      "storePassword": "01211201",
      "password": "01211201"
    }
  }
}

执行cordova build android --release 就能获得一个完整的带签名的apk包了。
XCode环境配置

Mac里面node和cordova安装步骤和Windows同样，若是命令行报错，在命令行前添加sudo就能够了，而后是下载Xcode，下载完以后执行一下命令：
xcode-select --install
npm install -g ios-deploy

这里就配置好了，而后就是使用cordova新建项目，新建完，在cordova里添加iOS平台，使用: cordova platform add ios
而后执行cordova run/build ios,就能够在xcode里面打开platform/ios文件夹，运行，在xcode的虚拟机里看到咱们的myAPP1了，和Android不一样的是，cordova不能直接打包ipk的debug包，须要开发者帐号和证书，这部分比较麻烦一些，我如今没有证书，因此只走到这一步

整合vue到cordova

用vue的同窗可能会有这么一个烦恼，每次vue项目打包完成后，都要手动的复制粘贴到cordova项目的www文件夹下面，非常麻烦。其实能够把vue和cordova项目整合到一块儿，让vue在执行打包命令时，把打包好的文件直接输出到cordova的www文件夹下面，这样每次修改完东西只要如今vue目录下执行npm run build, 而后在cordova目录下执行cordova build android --release就完成整个项目的APP打包工做，省去了中间的复制粘贴步骤，想一想就很美好呀，具体操做步骤以下：

首先，建立vue项目，须要一个vue-cli脚手架，没有的话用命令行安装一下：npm install -g vue-cli 安装，安装完成以后，在cordova项目目录下初始化vue项目，vue项目初始化命令行：vue init webpack my-project，命令行执行时会让输入一些信息，也能够一路enter默认，vue项目初始化完成以后，项目文件夹是这样的：

而后须要修改一些配置项，让vue项目打包的文件输出到cordova项目下的www目录里，打开vue项目的config/index.js文件，修改以下配置项到如图所示内容：

这样，vue生成的打包文件就能直接输出到cordova的www文件夹下面了 在vue目录下执行npm run build 完成以后，在cordova目录下执行cordova build andriod 就完成了vue项目打包成apk工做。iOS工做原理相同。