Vue项目打包成app——Cordova

最新推荐文章于 2024-08-11 03:31:53 发布
最新推荐文章于 2024-08-11 03:31:53 发布
阅读量787 收藏 2
点赞数
分类专栏： app开发 文章标签： android vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44760923/article/details/108598289
版权
本文介绍了如何使用Cordova将Vue项目打包成Android应用。首先，详细阐述了开发环境的配置，包括Windows 10、Node.js、Java、Android SDK和Gradle的安装与环境变量设置。接着，通过npm安装Cordova，创建项目，并添加Android平台。然后，检查构建条件，安装必要的SDK和Gradle。最后，讲解了Vue项目如何与Cordova项目结合，打包Vue应用并运行在模拟器或安卓设备上。
摘要由CSDN通过智能技术生成

Cordova是使用HTML、CSS和JavaScript构建的混合移动应用程序的平台。
官网：https://cordova.apache.org/
中文官网：http://cordova.axuer.com/

开发环境及工具

开发环境

  • 操作系统： Windows 10

  • nodeJs：需要使用其npm包管理工具安装Cordova

  • Java环境：

  • 下载安装jdk http://www.oracle.com/technetwork/java/javase/downloads/index.html

  • 配置JAVA_HOME环境变量，指定为JDK安装路径

  • Android环境：

  • 下载安装Android JDK(installer_r24.4.1-windows.exe)

  • 根据自己需要选择必要的API

  • 配置ANDROID_HOME环境变量，指定为Android jdk安装路径

工具

1、VS code
2、Android Studio（可选）
3、夜神模拟器

<

最低0.47元/天 解锁文章
Trista-
关注
专栏目录
使用cordova将Vue项目打包成app完整详细流程
m0_46694056的博客
11-08 4033
环境搭建与配置 一、下载jdk并配置 下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 往下滑，找到你自己电脑合适的系统，我的是64位的，如下 下好之后注意自己的安装目录就行，正常操作即可完成安装。 *配置jdk 1.打开环境变量，点击新建 然后输入JAVA_HOME和你刚才安装的jdk的安装目录，随后点击确定。 2.双击path之后，新建两个环境变量：%JAVA_HOME%\jre\bin
Vue项目打包成移动端APP
热门推荐
追梦&天空的博客
09-25 3万+
Vue项目打包成移动端APP 需要准备的工具：Hbuilder 目录 Vue项目打包成移动端APP 首先打包vue到dist目录 然后再Hbuilder中打开dist目录 然后将dist包含的 web项目 转换为 移动 APP项目 前几步配置完成后，就可以在手机上进行真机调试了 真机测试没有问题，就可以进行下一步---》打包apk了 最后将apk安装包安装到手机上就可以正常使用了...
使用Android studio将nodejs项目打包成apk
最新发布
weixin_32751907的博客
08-11 81
使用 Android Studio 将 Node.js 项目打包成 APK 的指南 将 Node.js 应用程序打包成 Android APK 是一个相对复杂的过程，但对于初学者来说，可以通过以下步骤来完成。本文将为你详细介绍这个过程，并提供必要的代码示例以及相关的甘特图与饼状图展示，以便于理解。 整体流程 在开始之前，我...
cordova打包vue项目为app
zeternityyt的博客
04-01 4059
一、创建cordova项目1、创建项目前提条件（1）node.js详细安装步骤可参考node.js官网：https://nodejs.org/en/下载安装成功后，在命令窗口中输入npm -v查看是否成功（2）JDK在官网下载安装：https://www.oracle.com/index.html并配置环境变量（重要）成功后，在命令窗口输入java 和javac。出现类似信息则表示安装成功。（3）...
VUE+cordova打包apk
小唐的博客
11-30 1792
上面说过 自己的vue 项目 通过 npm run build 打包好的静态文件 static 和 index.html复制到 www 的文件夹下替换。可以通过官网安装 也可以通过 android studio 进行安装 配置好环境变量 可以查询资料。打包好以后 会出现一下图片 我们需要的是 静态资源（static） 以及 index.html。生成的证书要跟打包好的项目放在一个文件夹内。这时候文件夹下会出现你创建好的项目文件。您的名字与姓氏是什么：【自己写】这个时候可以打包自己的项目。
vue项目打包成app
qq_36183088的博客
06-17 3798
打包步骤 vue如今已经很流行了，下面就是如何将vue项目如何打包成apK文件： 新建vue项目 ，项目配置根据自己项目的情况自行配置； 然后在终端中运行 npm run build ,将项目进行打包，这样你的根目录下就会有dist文件夹（这个文件夹名称可以执行配置，vue3中要自己添加vue.congfig.js文件进行相关配置，）； 然后用HBuilder 打开dist文件夹（这里建议复制...
cordova 学习2——cordova+vue进行打包测试。
kinding的博客
07-16 617
1.准备一个VUE项目，以官方提供的VUE模板为例子 vue init webpack demo 2.在index.html里面引入cordova.js &lt;script type="text/javascript" charset="utf-8" src="cordova.js"&gt;&lt;/script&gt; 3.更改配置文件：config——&gt;index.js里面...
Cordova开发app——Websocket掉线问题
重庆崽儿Brand
08-03 1152
原文地址：http://www.brandhuang.com/article/1564810311319 在我们的Cordova+vue开发的app项目中，一直深受websocket掉线问题的困扰 安卓手机手机退到桌面或者锁屏后不知道个多少间就会掉线。当立进入app后就会发现消息收不到、消息接收不到 苹果手机一锁屏就掉线了。。。 因为websocket在连接不上服务器或者断开连接后，会执行一个...
cordova混合App开发：Cordova+Vue实现Android APP开发（一）
saucxs
06-26 4062
一、前言 android开发以前干过，但是一直觉得比较麻烦，缺少分享功能，现在的app大多数是h5的混合开发的app，需要用到原生的android API的时候需要去做兼容，如果是开发速度合并效率，还是混合的H5开发比较受企业的青睐。现在先来自己趟趟水环境配置。 二、下载并安装Android Studio 　Android Studio中文社区地址：http://www.android...
Cordova开发app——使用插件录音并上传服务器
weixin_33676492的博客
03-06 2020
本文首发在我的个人博客上： http://www.brandhuang.com 本文主要使用到的主要插件有一下三个： 插件的github地址： cordova-plugin-media cordova-plugin-file cordova-plugin-file-transfer 1、cordova-plugin-media //录音并生成音频文件 2、cordova-plugin-fi...
一套Vue代码五端可用H5小程序PC苹果App安卓App使用mpvue实现小程序weex打包APP
08-10
一套 Vue 代码，五端可用(H5、小程序、PC、苹果App、安卓App）,使用mpvue实现小程序，weex打包APP
vue项目打包成App
weixin_38673922的博客
07-24 2305
找到HBuilder X 工具栏 => 发行 => 原生App-云打包 选择公共测试证书。在router/index.js关闭路由的history模式（默认哈希）将生成的dist文件夹里面的内容复制，放进该文件夹（app1.0）中。新建 => 项目 => 选择 5+app => 输入项目名称。
vue+cordova构建跨平台应用集成并使用Cordova plugin
weixin_34138521的博客
11-22 1670
安装 //安装 vue-cil npm install --global vue-cli //安装cordova npm i cordova -g cordova 新建项目 //新建cordova 项目cordova create vue-cordova//进入目录cd vue-cordova//vue-cli新建vue项目vue init webpack vueprojectname/...
cordova使用vue进行开发
HelloWorld的专栏
07-19 341
cordova vue
前端VUE项目打包成安卓APP
Gabriel的专栏
08-18 4449
1.打包vue项目，在项目的根目录执行命令 npm run build,直至项目打包完成 打开dist文件件，里面有一个index.html和static文件夹。 2.新建cordova项目 2.1安装cordova，命令行执行 npm install -g cordova 2.2利用cordova创建一个新项目，命令行执行cordova create folkmusic com.music.folkmusic musicapp folkmusic是项目名称，com.music.folk.
vue移动端项目打包成app
weixin_52608028的博客
02-22 196
运行命令 生成dist文件夹 npm run build 打开HBuilder 右键 新建 项目 复制dist文件夹下的文件替换新建项目里边相同文件 打开新建项目manifest.json,设置基础配置 右击项目名-> 发行 -> 原生App云打包 若出现错误提示 去掉通讯录的勾选重新打包 队列中----等待打包完成 打包成功—复制链接至手机浏览器下载 ...
Cordova 打包vue 项目
jie980432841的专栏
04-10 644
https://www.cnblogs.com/jeremy5810/p/8467258.html
2024年前端最新vue项目如何打包以及如何变成android、ios应用程序，前端简历项目经验
2401_84433570的博客
05-07 1585
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
Vue项目使用HBuilder打包成APP详细教程
"vue-cli或vue项目利用HBuilder打包成移动端app操作" Vue CLI 和 Vue.js 项目可以通过HBuilder工具转换为移动端的应用程序，这个过程涉及多个步骤，包括项目运行、配置修改、文件打包、目录创建、应用转换以及调试...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值