微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

 

2、Android SDK下载

https://www.androiddevtools.cn/

 

3、安装Gradle


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

版本检测:

Gradle -v

 

 

系统变量 配置 新增如下:
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 配置


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 项目名

 

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 编译发布项目

Android Apk生成

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

2、执行命令编译生成apk文件
cordova build android


3、Apk文件
项目\platforms\android\app\build\outputs\apk\debug 文件夹下

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

5、通过命令

cordova serve android

 

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

 

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐