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

最新推荐文章于 2022-03-01 18:36:47 发布
最新推荐文章于 2022-03-01 18:36:47 发布
阅读量516 收藏
点赞数
分类专栏： APP 文章标签： 前端 cordova android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/IS_huang/article/details/105579651
版权

本地启动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

Cordova+Vue打包APP
DayDreamWMM的博客
12-07 3016
打包APP步骤：（除非特殊说明，以下步骤均为Windows环境） 1.安装node环境 2.安装cordova插件 3.配置安卓的SDK和JDK环境变量（Android），配置iOS的xcode环境（iOS） 4.整合vue到cordova 安装node环境： 首先去官网下载node.js，传送门node.js下载地址，推荐下载长期支持版 Node.js下载完成之后，一步步默认安装就可以，安装完...
使用cordova对vue项目进行打包(android)
liucai1018的博客
06-17 1048
说明： 当前有一个vue项目，需要使用cordova进行打包 环境条件： 1 jdk-即Java运行环境 这个很简单，百度一下就行，学过Java的话都有安装过jdk 检查电脑是否安装了jdk：win+R->输入cmd->回车进入黑窗口，输入javac->如果出现关于javac的帮助信息则表示已安装 2安装nodejs环境 相信一般要打包vue项目肯定开始也是装了nodejs了 查看是否安装了nodejs：node -v（如果出现了版...
Cordova打包签名的几种方式
qq_40014350的博客
07-22 703
首先！！！！******** 生成数字签名文件（keystore）******** keytool -genkey -v -keystore YG.keystore -alias cordova-demo -keyalg RSA -keysize 2048 -validity 10000 然后！！！1******************* 方法一 、手动生成 ********************** 1.生成releaseAPK cordova build android --release 2.对A
vue 各种打包坑
weixin_30822451的博客
09-19 478
1，报错 Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not ex...
Vue项目的打包方式（生成dist文件）
热门推荐
商务合作 | 共同学习 | 携手共进
12-30 17万+
打包vue项目，生成dist文件夹。
教你用Cordova打包Vue项目的方法
08-29
目前流行的打包方法有weex和Cordova两种，今天我们将详细介绍使用Cordova打包Vue项目的方法。 安装Cordova 首先，我们需要安装Cordova。使用npm安装Cordova的命令是`npm install -g cordova`。如果已经安装了...
Cordova+Vue实现Android-APP开发
07-12
本文将详细介绍如何通过Cordova和Vue.js这两种技术来实现Android应用程序的开发。 #### 一、Cordova简介 Cordova是一个开源移动开发框架，它允许开发者使用HTML、CSS和JavaScript来构建跨平台的移动应用程序。通过...
cordova+vue打包apk
七七的博客
03-01 2264
vue+cordova开发移动APP项目 一、环境(版本及配置) 1、node 12.13.1 执行命令查看版本 node -v 显示版本号则安装成功。 2、cordova 9.0.0 执行命令查看版本 cordova -v 显示版本号则安装成功。 3、vue cli 2.9.6 执行命令查看版本 vue -V 显示版本号则安装成功。 4、Android SDK 安装及配置环境 执行命令查看安装成功 adb 或者 cordova requirements 显示如此则表示安装配置完
cordova打包vue项目，本地图片失效不显示
weixin_44563906的博客
06-10 1888
2019-06-10最近用vue开发，cordova打包，开发APP，但是碰到一个问题，就是图片如果用在线的就正常，如果应用本地的，则开发过程中正常，打包后就不显示，找了一下资料，发现是打包后悔自动更改路径。解决方法如下： 目录结构如下： 在写代码的时候会引用图片，此时我们可能会写2种方法。第一种在html中直接写img，第二种在css中写background。如下代码： #CSS如下： ....
vue打包成app应用，Webstorm+cordova打包vue成Android项目
weixin_43796132的博客
06-27 877
目录一：万事开头难，准备环境；若已搭建好环境请忽略跳到第二步1. 安装java sdk2. 安装java sdk3. 安装gradle二:：搭建cordova平台1. 全局安装cordova2. 创建cordova项目3. 假设你已经有了Vue项目那么进行build编译得到dist文件夹，复制vue项目中 dist 下面的文件粘贴到创建好的 android-app 项目的 www 文件下4. 打包android项目三： 生成apk1. 生成签名，要是不生成签名；apk会安装失败2. 然后在android-a
用Cordova打包Vue项目的方法步骤
10-17
主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决cordova+vue 项目打包成APK应用遇到的问题
11-29
公司前端界面用的是vue，我要嵌入到Android中生成App 第一步：安装node node安装：直接进入官网https://nodejs.org/zh-cn/，下载最新版本安装。安装之后在命令行中使用”node -v” 检查安装是否成功。 npm安装：由于新版的nodejs已经集成了npm，所以node安装时npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。 第二步：安装cordova 1. 打开cmd 输入命令：npm install -g cordova .安装cordova 2. 验证是否安装成功，cmd中输入命令: cordova -v 如下
cordova 打包 vue项目
zhSpace的博客
11-30 2438
1、安装cordova npm install -g cordova 2、新建cordova项目 cordova create jtcsm com.xx.jtcsm eat jtcsm是项目名称 com.xx.jtcsm是包名 eat app标题 3、创建完新的cordova项目后将 vue编译完后dist文件夹下的文件复制到 www文件夹下 * 记得将原先www文件夹内的文件全部删除 4、检查环境是否准备就绪 cordova requirements 5、生成签名...
cordova打包vue项目
debugcool的博客
02-03 244
需要软件 Android SDK，我这里直接安装Android Studio的时候已经安装了。 cordova使用npm安装 npm install -g cordova jdk安装教程网上都有，就是记得配置环境变量JAVA_HOME 创建cordova项目 cordova create helloCordova 添加Android cordova platform add android --save 然后把你打包好的vue项目复制到helloCordova项目中的www目录下 然后就是build你
使用 Cordova 跨平台打包 Vue
nonlinearthink的博客
10-24 1061
想要更好的阅读体验，可以转我的个人博客。 Cordova 安装 使用 npm 安装 cordova 命令行: npm install -g cordova 创建 Vue 项目: vue create cordova-test 找了一圈 Vue 的 Cordova 插件，个人觉得最好用的是这个: vue-cli-plugin-cordova-simple。这位老哥写得这么好，都没人帮他宣传。 vue add vue-cli-plugin-cordova-simple 新建 vue.config.js 文
Cordova打包vue项目生成Apk （解决cordova build android抛出的zip问题）
weixin_30539835的博客
01-18 547
最近对vue前端框架情有独钟。但研究了一下怎么把vue项目打包成android apk来玩玩。 首先讲一下创建vue2.x项目。其实在之前的文章中都有写过，有兴趣的同学可以去看看。http://www.cnblogs.com/Gherardo/p/7170540.html 这里就不多废话了。 项目地址：https://github.com/Gallado/IFlowersapk也在相应的目...
Cordova - Windows系统下安装配置Cordova
Welcome
06-13 1107
使用Cordova可以很方便地进行跨平台应用的开发。在之前的文章：Cordova - 使用Cordova开发iOS应用实战1（配置、开发第一个应用）。介绍了如何在Mac OS系统下安装使用Cordova。本文介绍如何在Windows系统下搭建Cordova环境。并使用Cordova编译发布一个安卓（Android）应用。 一，Cordova环境搭建 1，...
cordova打包html项目的,教你用Cordova打包Vue项目的方法
weixin_39592315的博客
06-17 171
现在国内越来越多的开发者使用Vue开发混合app，但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的，有兴趣的可以去学习使用一下。因为我本身是做angular+ionic的，所以比较青睐cordova，下面我就教大家怎么使用cordova打包Vue项目：第一步：安装...
cordova环境配置，将vue项目打包成apk
qq_41911997的博客
06-12 378
jdk下载并配置 下载jdk 下载地址：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载完成，一直下一步即可 配置jdk 1、新建 JAVA_HOME 的变量，值为jdk安装路...
vue项目打包android
最新发布
03-21
<think>好的，我现在需要帮助用户了解如何将Vue项目打包到Android平台，使用Cordova或Capacitor。首先，我需要回忆一下这两种工具的基本用法和步骤，同时结合用户提供的引用内容中的信息。 用户提供的引用中提到了Capacitor的相关命令，比如ionic capacitor sync android，npx cap add android等，还提到了Vue3+Quasar+Capacitor的配置步骤。这说明用户可能在使用Vue框架，并且希望集成Capacitor或Cordova。我需要整理出针对Vue项目的具体步骤，特别是结合引用中的命令。 首先，我需要比较Cordova和Capacitor的优缺点，帮助用户选择。Cordova比较成熟，插件多，但配置可能复杂。Capacitor由Ionic团队维护，更现代，对现代前端框架支持更好，可能更适合Vue项目，尤其是结合引用中提到的Capacitor的使用步骤。 然后，分步骤说明如何用Capacitor打包Vue项目。根据引用中的信息，需要先安装Capacitor的核心包和Android平台包，初始化Capacitor，配置项目，然后进行构建和同步代码。需要注意的是每次修改代码后要先构建（比如npm run build），然后运行npx cap copy或sync来同步到Android项目，再通过Android Studio打开并运行。 对于Cordova的步骤，可能需要先安装Cordova CLI，创建项目，添加平台，复制构建文件到www目录，然后构建和运行。但用户提供的引用中没有Cordova的具体命令，可能需要补充基本步骤，同时注意可能的注意事项，比如路径配置。 接下来，需要总结注意事项，比如构建前确保静态资源路径正确，处理跨域问题，插件兼容性等。同时，根据引用中的提示，每次代码修改后需要重新构建并同步，否则安卓那边会报错，这点很重要，必须强调。 最后，生成相关问题，可能涉及性能优化、插件使用、调试方法、升级注意事项等，帮助用户进一步探索。 需要确保所有命令正确，语法正确，使用中文回答，结构清晰。同时，引用中的内容需要正确标注，比如引用[^1]、[^2]、[^3]的位置，可能在Capacitor的步骤中提及初次同步命令或同步的重要性。</think>### 将Vue项目打包到Android平台的教程（使用Capacitor或Cordova） 以下是使用**Capacitor**和**Cordova**两种工具将Vue项目打包为Android应用的详细步骤： --- #### 一、使用Capacitor实现（推荐） Capacitor由Ionic团队开发，支持现代前端框架（如Vue），配置更简洁。 1. **安装依赖** ```bash npm install @capacitor/core @capacitor/cli --save npm install @capacitor/android --save # 添加Android平台支持 ``` 2. **初始化Capacitor** ```bash npx cap init # 根据提示输入App名称、包名（如com.example.myapp） npx cap add android # 添加Android平台 ``` 3. **配置Vue项目** - 在`vue.config.js`中设置输出目录为`dist`（需与Capacitor配置一致）： ```javascript module.exports = { outputDir: 'dist' } ``` 4. **构建与同步代码** ```bash npm run build # 生成静态文件到dist目录 npx cap copy android # 将dist内容复制到Android项目 npx cap sync android # 同步依赖（初次必须执行，否则报错） ``` 5. **运行Android项目** ```bash npx cap open android # 在Android Studio中打开并编译运行 ``` --- #### 二、使用Cordova实现 Cordova适合需要兼容旧插件或已有Cordova经验的项目。 1. **全局安装Cordova** ```bash npm install -g cordova ``` 2. **创建Cordova项目** ```bash cordova create my-app com.example.myapp MyApp # 创建项目目录 cd my-app cordova platform add android # 添加Android平台 ``` 3. **关联Vue项目** - 修改Vue构建输出目录为Cordova项目的`www`文件夹： ```javascript // vue.config.js module.exports = { outputDir: 'path/to/my-app/www' } ``` - 每次修改代码后执行： ```bash npm run build && cordova prepare android # 构建并复制文件到Cordova ``` 4. **编译与运行** ```bash cordova build android # 生成APK cordova run android # 连接真机或模拟器运行 ``` --- #### 三、注意事项 1. **路径问题**：确保Vue的静态资源路径设置为相对路径（`publicPath: './'`）。 2. **插件兼容性**：Capacitor对部分Cordova插件需通过`@capacitor-community`适配。 3. **同步机制**：Capacitor需在每次代码更新后执行`npx cap copy`同步，否则Android端代码不更新。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值