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

2024-03-01 19:01:10

环境准备工作 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：能看见这一步、基本上可以快乐的玩耍起来了、！！！

码农公寓