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

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

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

本地启动cordova 项目

本地创建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实时生效

Android 硬件调用

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

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

cordova 插件调用

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

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

例如版本号对比:

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

### 初始化一个基于 CordovaVue 项目 要初始化一个基于 CordovaVue 项目,可以按照以下方法操作: #### 安装 Cordova 和创建基础项目 首先需要全局安装 Cordova 工具链。通过 Node.js 的包管理工具 `npm` 来完成这一过程[^4]。 ```bash npm install -g cordova ``` 接着使用 Cordova 命令行工具创建一个新的项目。假设项目的名称为 `cordova-vue-app`,可以通过如下命令实现[^2]: ```bash cordova create cordova-vue-app com.example.cordovavue MyAppName ``` 此命令会生成一个基本的 Cordova 应用程序结构,并设置应用 ID (`com.example.cordovavue`) 及显示名 (`MyAppName`)。 #### 集成 VueCordova 项目中 为了将 Vue 整合到已有的 Cordova 项目中,可以选择手动方式或者借助脚手架工具(如 Vue CLI)。以下是具体步骤: 1. **进入新创建的 Cordova 项目目录** 使用终端导航至刚刚创建的项目文件夹: ```bash cd cordova-vue-app ``` 2. **初始化前端框架** 在 Cordova 项目的 `www` 文件夹下集成 Vue。由于 Cordova 默认会在构建过程中复制该路径下的静态资源作为最终的应用内容,因此可以直接在此处引入 Vue 或者其他现代 JavaScript 框架。 如果希望快速搭建 Vue 环境,则可以在本地环境中先利用 Vue CLI 创建独立的 Vue 单页应用程序 (SPA),再将其打包后的产物放入 Cordova 的 `www` 路径下。 下面展示如何单独配置 Vue 并嵌入 Cordova 中: - 先安装 Vue CLI (如果尚未安装的话) ```bash npm install -g @vue/cli ``` - 新建 Vue SPA 项目并指定目标位置为子文件夹, 如命名为 `frontend` ```bash vue create frontend ``` 3. **调整 Webpack 输出路径** 修改 Vue 打包输出的目标地址使其适配 Cordova 结构。打开 Vue 项目的根目录中的 `vue.config.js` 文件(如果没有则需自行创建),定义自定义配置项以便于控制编译行为: ```javascript module.exports = { publicPath: './', // 设置相对路径模式 outputDir: '../www' // 将生产版本写回到 ../www/ }; ``` 4. **添加 Android 运行支持** 返回主工作区即 Cordova项目所在的位置,执行下面语句以增加对 Android 设备的支持[^3]: ```bash cordova platform add android --save ``` 5. **验证环境依赖满足情况** 测试当前机器上是否具备必要的软硬件组件用于后续开发阶段的操作检查指令如下所示: ```bash cordova requirements ``` 6. **启动调试流程** 当一切准备就绪之后就可以尝试运行一次完整的构建与部署测试了。对于 Android 平台而言,可分别采用下列两种形式之一来进行实际设备上的预览或模拟器内的即时反馈观察: ```bash cordova build android cordova run android ``` 以上便是关于如何从零开始建立一个融合了 Cordova 技术栈以及 Vue 用户界面库特性的混合型移动客户端解决方案的大致介绍。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值