cordova+vue 项目打包构建Android应用

环境准备工作 Windows

1、首先安装jdk、
https://www.oracle.com/java/technologies/javase-jdk8-downloads.html

PS:这些提醒一下同学、jdk 建议默认安装C盘、不然太折腾人了
版本检测:

java -version

目前在官网下载低于jdk1.8的java jdk的时候需要登陆,这边分享一个账号,方便下载 (PS:这个是网上找到)Oracle账号(转载)
2696671285@qq.com 
密码:Oracle123
来源地址:https://blog.csdn.net/Stars_min/article/details/91659994

 

cordova+vue 项目打包构建Android应用cordova+vue 项目打包构建Android应用

2、Android SDK下载

https://www.androiddevtools.cn/

cordova+vue 项目打包构建Android应用

 

3、安装Gradle


https://services.gradle.org/distributions/

版本检测:

Gradle -v

 

 cordova+vue 项目打包构建Android应用cordova+vue 项目打包构建Android应用

系统变量 配置 新增如下:
JAVA_HOME C:\Program Files\Java\jdk1.8.0_251
CLASSPATH .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

Path 新增如下:
Path
%JAVA_HOME%\jre\bin
%JAVA_HOME%\bin
E:\Adnroid\Tools\android-sdk_r24.4.1-windows\android-sdk-windows
E:\Adnroid\Tools\android-sdk_r24.4.1-windows\android-sdk-windows\platform-tools
E:\Adnroid\Tools\android-sdk_r24.4.1-windows\android-sdk-windows\build-tools
E:\Adnroid\Tools\android-sdk_r24.4.1-windows\android-sdk-windows\tools
E:\Adnroid\Tools\android-sdk_r24.4.1-windows\android-sdk-windows\cmdline-tools\latest

 

cordova+vue 项目打包构建Android应用

Cordova 配置


Cordova中文网: http://cordova.axuer.com/

1、安装cordova
这一步的前提是已经完成安装node。
node安装:https://nodejs.org/zh-cn/

2、全局安装

npm install -g cordova
版本检测:cordova -v

 

3、新建cordova项目

cordova create Chy.Demo.Cordova org.apache.cordova.ChyApp Chy.Demo

目录结构注解:
Chy.Demo.Cordova:cordova目录名
org.apache.cordova.ChyApp: 包名
Chy.Demo 项目名

 

cordova+vue 项目打包构建Android应用

4、生成cordova platform add android 创建Android平台所需要的cordova库

cordova platform add android

 

PS:到这里基本上已经完成大半工作了!!!

Vue项目构建


1、首先全局安装Vue-cli脚手架

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

 

2、使用命令行创建Vue项目

vue init webpack Chy.Demo

 

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

index: path.resolve(__dirname, '../www/index.html'),
assetsRoot: path.resolve(__dirname, '../www'),
assetsSubDirectory: '',
assetsPublicPath: '',

4、使用npm run build 编译发布项目

cordova+vue 项目打包构建Android应用

Android Apk生成

1、将生成的www文件夹目录下的文件、覆盖至 Cordova项目中的 www

cordova+vue 项目打包构建Android应用

2、执行命令编译生成apk文件、
cordova build android
cordova+vue 项目打包构建Android应用
3、Apk文件目
项目\platforms\android\app\build\outputs\apk\debug 文件夹下

4、打包调试之前、首先要检查AndroidSDK是否正确安装,执行命令检测
cordova requirements

cordova+vue 项目打包构建Android应用

5、通过命令

cordova serve android

 

然后在浏览器里面通过http://localhost:8000/android/www/index.html#/可以访问该页面(就像在手机中看到页面一样)

cordova+vue 项目打包构建Android应用

 

PS:能看见这一步、基本上可以快乐的玩耍起来了、!!!

 

上一篇:最流行的编程语言 JavaScript 能做什么?


下一篇:Cordova插件开发(iOS/Android)--看这篇就够了