使用cordova将Vue项目打包成app完整详细流程

环境搭建与配置

一、下载jdk并配置
下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
往下滑，找到你自己电脑合适的系统，我的是64位的，如下

下好之后注意自己的安装目录就行，正常操作即可完成安装。
*配置jdk
1.打开环境变量，点击新建

然后输入JAVA_HOME和你刚才安装的jdk的安装目录，随后点击确定。

2.双击path之后，新建两个环境变量：%JAVA_HOME%\jre\bin 和 %JAVA_HOME%\bin

3.新建完后，往回退一步，再新建一个CLASSPATH 变量，值为：.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar（*记住前面有一个点和逗号，不要复制漏了），点击确定

4.检验jdk是否安装并配置成功
打开cmd控制台，直接输入java -version，并按回车，如果出现类似下图的结果，出现版本号即可。

然后再cmd中再输入javac -version，同理，还是一样出现版本号即可。

-----------------------------------------------------------------------------------------------------------------------

二、 android studio下载并配置
1.下载android studio，下载地址：https://developer.android.google.cn/studio/
*安装教程请参考下：https://www.cnblogs.com/gufengchen/p/10991886.html，在安装的时候，如果电脑之前没有安装过SDK，那它就会提示你安装，然后找到合适的路径存放即可，我这里是安装在C盘的，你可以选择其他盘。
*注意：当你打开如上的界面的时候，应该只有一个Android 10.0(Q)是被打了勾的，其他都是空的。如果在打包的时候，出现SDK许可证什么什么不正确之类的报错信息的话，那你就下载下载另外一个，例如上图就是，打包报错然后，我又下载了Android 10.0+(R)，然后再重新打包应该是可以了的。当然你没有报错就算了。

2.配置SDK

• 还是和配置jdk环境变量类似，先打开环境变量，然后新建一个ANDROID_HOME变量，值就是刚才你暗转SDK的路径
  

• 接着，还是双击path，新增两条环境变量：
  %ANDROID_HOME%\tools和%ANDROID_HOME%\platform-tools
  
  

• 接着就是检验sdk安装是否成功
  在cmd中输入adb并回车，出现类似下图的界面时则说明以成功安装
  
  -----------------------------------------------------------------------------------------------------------------

三、 gradle配置
在下载Android Studio的时候，它会自动帮你下载gradle，所以就只需要我们找到它的安装路径即可，方法如下：
1.打开Android Studio，点击配置Configure

选择设置
在搜索框中输入gradle，再点击下方的gradle，就可以看到它的安装路径了

再打开环境变量，新建一个GRADLE_HOME变量，值就是刚才我们找到的gradle路径。

再重复之前的动作，双击path，新建%GRADLE_HOME%\bin环境变量

*同样检验一下gradle是否配置成功，在cmd中输入gradle -version并回车，出现和下图类似的图即可，其实就是看有没有出现版本号就可以了，版本号和我不一样没关系，有就行了。

-----------------------------------------------------------------------------------------------------------------

到此为止，我们总算是把所有的环境搭建完h毕了，直接炸裂(吐血.jpg)

-----------------------------------------------------------------------------------------------------------------

一、下载cordova

在cmd中输入cnpm install -g cordova，并回车

cnpm install -g cordova

*如果出现cnpm内部或外部命令，也是可执行程序。。。。类似的报错，那就说明，你没有装cnpm，那你就需要先安装cnpm，方法是在cmd中输入npm install -g cnpm --registry=https://registry.npm.taobao.org，如果你npm也没有安装，那你就先自行百度

-----------------------------------------------------------------------------------------------------------------

二、使用Cordova打包app(终于开始啦！！！)

1.你先在你的电脑找一块空地，随便哪里都行，我这里找的是这里。记住一定要是空地！！什么叫空地，就是像下面一样，里面啥都没有。

2.在你找的那个空地，用cmd打开，输入

cordova create studyClass

并回车，即可新建一个Cordova项目，这个后面的“studyClass”是指你这个项目的名字，你随便起就行，不要有中文就可以了。

点进文件夹中就是这样的

3.用cmd进入到studyClass目录里面去，即输入cd studyClass并回车

4.为studyClass目录添加平台，在cmd中输入cordova platform add android --save并回车，出现与下图类似的图就可以了。

cordova platform add android --save

5.再返回vue项目中，新建一个vue,config.js文件，注意是文件，不是文件夹，不要建错了，并将这个文件添加如下内容

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static'
}

6.在vue项目的根目录中用cmd打开，输入npm run build并回车，完成后在你的vue项目的根目录中就会多出一个dist文件夹

npm run build

7.将dist文件夹中的所有内容全部复制到，之前用Cordova新建的studyClass项目中的’www’文件夹中。

8.接着就在用Cordova新建的studyClass文件夹中用cmd打开，输入cordova requirements并回车，开始打包。

cordova requirements

再输入cordova build android并回车

cordova build android

9.将打包好的.apk文件放到夜神模拟器、自己的手机或者Android Sstudio里面AVD都可以

结束了！！！！

（可忽略内容）对于Android9.0以上的手机的配置

*Android版本过高会导致无法登录，axios无法请求完成等问题

1、打开如图路径，在AndroidMainfest.xml中新增配置android:networkSecurityConfig="@xml/network_security_config"


2、打开如图路径,新建文件network_security_config.xml

<network-security-config>
     <base-config cleartextTrafficPermitted="true" />
network-security-config>

3、重新执行命令cordova build android，此时生成的apk就可以在安卓9.0以上版本中使用