cordova打包Vue项目 - 两种打包方式

最新推荐文章于 2022-03-01 18:36:47 发布

IS_LeQian

最新推荐文章于 2022-03-01 18:36:47 发布

阅读量528

点赞数

CC 4.0 BY-SA版权

分类专栏： APP 文章标签：前端 cordova android

本文链接：https://blog.youkuaiyun.com/IS_huang/article/details/105579651

3 篇文章

订阅专栏

本文详细介绍如何在本地创建并启动Cordova项目，包括项目打包、安装及在安卓虚拟机上运行的过程。同时，讲解了如何搭建本地服务、配置路由指向及调用插件API进行页面调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地创建cordova项目

将项目代码通过 npm build 打包项目代码生成dist 文件

将dist文件下 css、js 等文件复制到cordova项目 www 文件下面

通过 cordova build android 打包一个安卓的apk 文件

安装安卓虚拟机

手动将apk 文件拖入虚拟机中

打开 hello cordova软件

项目成功启动

node 搭建本地的一个服务 server ，模拟服务。

server下的public文件夹内存放需要运行得apk 文件

通过 npm start 启动服务

重新打开控制台，可通过ip config指令找到本地IP

通过cordova项目本地打包的apk文件
浏览器apk的下载地址: ip + 端口号 + apk名。
eg: 100.200.149.193：3000/app-debug.apk

www/js/index.js 文件
onDeviceReady: function(){} 这是项目运行的生命周期
方法1 ：window.location.href = ‘http://10.200.149.193:8080/’ 指向本地项目启动的ip

方法2：在config.xml 内配置

注：

以上两种方法启动项目的配置将
改成
改变路由的指向，当路由的指向被改变之后页面执行方法将执行项目内的代码为不是执行 onDeviceReady: function(){}。
项目内测试运行的的代码：

document.addEventListener('deviceready', function () {
  var versionCode = AppVersion.build
  alert(versionCode)  // 302048


}, false);

调用插件的api 可在此方法内使用，页面调试也可在此方法内使用

文件夹路径:ime-mobile-latest-app\config.xml
文件夹路径:ime-mobile-latest-app\platforms\android\app\src\main\AndroidManifest.xml

AndroidManifest.xml 文件夹内暴露了部分属性可在config.xml文件夹内配置
通过cordova build android 打包后会在AndroidManifest.xml实时生效

AndroidManifest.xml 文件下方配置
eg<uses-permission android:name="android.permission.CAMERA" />

硬件配置需要在AndroidManifest.xml 文件夹内增加上面一行代码配置，在项目启动的时候会有相机等硬件允许使用的提示。

cordova 其实只是一个壳，所有的插件使用都需要通过 cordova platform add plugin name 添加才能使用

项目代码内使用api插件即可调用。

将本地版本号与服务器版本号做对比。
版本号的更改在config.js