cordova环境配置,将vue项目打包成apk的详细流程

jdk下载并配置

  • 下载jdk

下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

cordova环境配置,将vue项目打包成apk的详细流程_第1张图片

下载完成,一直下一步即可

  • 配置jdk

1、新建 JAVA_HOME 的变量,值为jdk安装路径,此处为默认安装路径  C:\Program Files\Java\jdk1.8.0_74

cordova环境配置,将vue项目打包成apk的详细流程_第2张图片

2、双击path,新建环境变量   %JAVA_HOME%\jre\bin      %JAVA_HOME%\bin

cordova环境配置,将vue项目打包成apk的详细流程_第3张图片

cordova环境配置,将vue项目打包成apk的详细流程_第4张图片

3、新建 CLASSPATH 变量,值为  .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

cordova环境配置,将vue项目打包成apk的详细流程_第5张图片

  • 检验jdk

在cmd窗口输入 java -version 出现版本号即可

cordova环境配置,将vue项目打包成apk的详细流程_第6张图片

 在cmd窗口输入 javac -version 出现版本号即可


android studio下载并配置

  • 下载android studio

下载地址:https://developer.android.google.cn/studio/

参考文章:https://www.cnblogs.com/xiadewang/p/7820377.html

安装时,如果电脑上之前没有安装过SDK,会提示安装,此处安装到D盘的sdk文件夹中

cordova环境配置,将vue项目打包成apk的详细流程_第7张图片

如果在打包的时候,报错关于sdk的许可证不正确,可以在将Andorid 10.0(Q)换成另一个版本,再去打包

  • 配置SDK

1、新建 ANDROID_HOME 的变量,值为sdk的下载路径  D:\sdk

cordova环境配置,将vue项目打包成apk的详细流程_第8张图片

2、双击path新增环境变量  %ANDROID_HOME%\tools 和  %ANDROID_HOME%\platform-tools

cordova环境配置,将vue项目打包成apk的详细流程_第9张图片

  • 检验sdk

在cmd中输入adb,出现如下界面即可

cordova环境配置,将vue项目打包成apk的详细流程_第10张图片


gradle配置

在下载android studio的时候,会自动下载gradle,只要找到路径即可

在android studio软件界面 file --> Settings  --> 搜索gradle

cordova环境配置,将vue项目打包成apk的详细流程_第11张图片

1、新建  GRADLE_HOME 的变量,值为gradle的路径    C:\Users\xpf\.gradle\wrapper\dists\gradle-4.10.3-all\81msde2dx9p4vji0mjgtvxkcb\gradle-4.10.3

cordova环境配置,将vue项目打包成apk的详细流程_第12张图片

2、双击path添加环境变量  %GRADLE_HOME%\bin

cordova环境配置,将vue项目打包成apk的详细流程_第13张图片

3、cmd输入gradle -version出现版本号即可

cordova环境配置,将vue项目打包成apk的详细流程_第14张图片


至此,所需环境安装并配置完成


cordova下载

1、全局下载cordova

cnpm install -g cordova

2、检验cordova是否成功下载 ,在cmd中输入  cordova -v

cordova环境配置,将vue项目打包成apk的详细流程_第15张图片


cordova打包apk

1、使用cordova新建有一个cordova项目

cordova create test

cordova环境配置,将vue项目打包成apk的详细流程_第16张图片

cordova环境配置,将vue项目打包成apk的详细流程_第17张图片

注:如果新建项目失败,按如下报错的路径(C:\Users\xpf\AppData\Roaming\npm\node_modules\.....)找到node_modules删除后重新下载,推荐使用yarn install。重新下载完依赖包之后,再去新建一个项目即可

cordova环境配置,将vue项目打包成apk的详细流程_第18张图片

2、进入test目录,为项目添加平台(注意是否在cordova项目中)

cordova platform add android --save

3、进入vue项目,新建 vue.config.js 文件,文件中加入如下内容(如果vue.config.js新建到src下,打包出来的是空白页面)

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

cordova环境配置,将vue项目打包成apk的详细流程_第19张图片

4、执行npm run build,将vue项目打包成dist包

npm run build

cordova环境配置,将vue项目打包成apk的详细流程_第20张图片

cordova环境配置,将vue项目打包成apk的详细流程_第21张图片

5、将打包生成的dist下面的三个文件复制到cordova的www目录

cordova环境配置,将vue项目打包成apk的详细流程_第22张图片

复制完成后

cordova环境配置,将vue项目打包成apk的详细流程_第23张图片

6、确认打包环境无误后,开始打包

cordova requirements

cordova环境配置,将vue项目打包成apk的详细流程_第24张图片

cordova build android

cordova环境配置,将vue项目打包成apk的详细流程_第25张图片

7、根据打包成功提示的路径,找到apk,   此处为C:\Users\xpf\Desktop\test\test\platforms\android\app\build\outputs\apk\debug

cordova环境配置,将vue项目打包成apk的详细流程_第26张图片

将该apk移入到手机安装即可看到vue项目


注意:使用cordova打包的apk,可以安装到自己的手机、夜神模拟器、android studio的AVD上,三选一


关于android9.0及以上的配置置(安装apk的android环境过高时,会出现无法登录等错误)

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

cordova环境配置,将vue项目打包成apk的详细流程_第27张图片

cordova环境配置,将vue项目打包成apk的详细流程_第28张图片

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

cordova环境配置,将vue项目打包成apk的详细流程_第29张图片

内容如下:



     

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

 

你可能感兴趣的:(cordova,vue)