cordova 打包vue项目为apk
Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。实现目标:讲一个vue项目打包为apk使用。由于这个项目是已有的项目,重写工作量太大,所以无法使用uniapp。上网了解到可以使用Cordov
Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。
实现目标:
将一个vue项目打包为apk使用。由于这个项目是已有的项目,重写工作量太大,所以无法使用uniapp。上网了解到可以使用Cordova,将一个vue项目打包为apk。
准备工作:
-
安装
cordova
$ npm install -g cordova
-
安装
Android studio
软件
在软件内下载安装android SDK
设置环境变量ANDROID_HOME
-
安装
Java JDK
设置环境变量 -
安装
gradle
gradle下载链接
配置环境变量,我是直接在系统变量的path
引入地址路径
打包步骤:
5. 在已有的vue项目内新建cordova
项目
cordova create myApp
cd myApp
6. 初始化Cordova
开发环境
cordova platform add android
7. 检查Cordova的环境是否正确安装
cordova requirements
显示如上表示环境正确安装,缺少什么根据上面的准备工作安装即可
8. 编译vue
项目
我使用的vue-cli
版本是4.0,目类结构如下:
直接在vue.config.js
里设置打包路径为cordova
内的www
文件夹
module.exports = {
publicPath: '',
outputDir: './cordova/www'
}
执行编译 npm run build
9. 再次进入cordova
文件目录下,执行cordova build android
打包为apk程序。
注意:
- 生成带签名的apk,可在
andriod studio
内设置
cordova
下的config.xml
设置apk信息- 生成的apk无法联网,设置
AndroidManifest.xml
的内容
在application
内加入android:usesCleartextTraffic="true"
- apk 内跳转页面无法使用
window.location.href
,会使程序卡住无法运行,修改为vue 路由。
参考文章:
cordova+vue 项目打包成Android(apk)应用
还有我旁边可爱的同事的帮助,成功将项目打包为apk程序,手机运行无误o( ̄▽ ̄)ブ。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)