安卓开发 | 将Vue项目打包为app

简介: 安卓开发 | 将Vue项目打包为app

48ed496dbf4e4303b769003267e503bc.png

一、写在前面✨

40719b4461cb4e8b9f6cb6e0599e6c2d.png


大家好!我是初心,很高兴再次和大家见面。


今天跟大家分享的文章是 如何将Vue项目打包成apk,即安卓安装包 ,希望能帮助到大家!本篇文章收录于 初心 的 安卓开发 专栏。


🏠 个人主页:初心%个人主页

🧑 个人简介:大家好,我是初心,和大家共同努力

💕欢迎大家:这里是CSDN,我记录知识的地方,喜欢的话请三连,有问题请私信😘


事情是这样的:遇到一个需求,希望将Vue项目发布为apk,于是开始了解,下面是我整理的发布笔记,供大家参考。


二、Hbuilder X准备💕


为什么要使用Hbuilder X? 因为Hbuilder X提供了发布为app的功能,所以这里选择的是Hbuilder X。


2.1 Hbuilder X简介


Hbuilder X的宣言是:为极客、为懒人、为你,这是Hbuilder X的官网:Hbuilder X官网

image.png


HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。


Hbuilder X的优点就是:


一套代码,多端运行,可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序。


代码实现简单,开发快速,官网提供很多组件,可以直接拿来用。


2.2 下载


HBuilderX下载地址:在HBuilder官网点击免费下载,下载最新版的HBuilder。

HBuilderX目前有两个版本,一个是windows版,一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。


三、打包💕

3.1 获取dist目录


前面我们讲到如何使用 npm 命令将Vue项目打包,打包成功后生成了一个 dist目录 ,在这里发布为 app 也要用到这个 dist 目录。如果有不会打包的小伙伴可以参考我的这篇文章:将SpringBoot+Vue项目部署到服务器上


3.2 新建5+app


打开Hbuilder X,点击文件,选择新建项目,选择5+app。



1d19b7e7d1764d73850965ee0d41d821.png


f7516c8597964d20bcdf690d75969934.png

创建成功后,得到如下的文件目录:


c06b48a48d724df68156dc6b86be918f.png


3.3 替换文件


将css,img,js,index.html文件删除,只留下unpackage和manifest.json文件:


cac9f72c56a847aa83f81a7f03c9dfac.png

将dist目录下的所有文件拷贝到文件根目录下(我这里是test目录):


87b384dbd056479ab00a6c8e7bbc9d6e.png



852fba528621450783d02e4c45d09d27.png


3.4 编写manifast.json文件

  • 基础配置


79db6b46cae849f089a418047f133981.png

  • 模块配置


8dbe266e252e42fe9fee34745ac41849.png


  • 其他配置

其他配置根据自己的需求进行配置就好了。

将这些选项配置好之后,manifest.json文件就配置好了。


3.5 app云打包


点击原生app-云打包:


6eaff698e15049b091a83eca7fa1b20e.png


如果是第一次打包,需要下载一些插件,下载即可。

f330c8407f1b4fc6be93c2727da66cd6.png

ca17c4577a474a65bbd8b0cc619e4a18.png

打包成功之后就会生成一个 apk 文件,大家就可以发送到手机安装啦!


8c151b8e59fa4c32aab07dabeb668d61.png

四、总结撒花😊


本文主要讲解了如何使用Hbuilder X将Vue项目打包成apk文件,用于app开发。😊

✨ 这就是今天要分享给大家的全部内容了,我们下期再见!😊


🏠 本文由初心原创,首发于CSDN博客, 博客主页:初心%🏠


🏠 我在CSDN等你哦!😍


相关文章
|
5月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
853 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
726 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
938 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
6月前
|
缓存 Unix Android开发
Android安卓项目调试之Gradle 与 Gradle Wrapper的概念以及常用gradle命令深度详解-优雅草卓伊凡
Android安卓项目调试之Gradle 与 Gradle Wrapper的概念以及常用gradle命令深度详解-优雅草卓伊凡
621 8
|
6月前
|
存储 API Android开发
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
489 4
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
|
5月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
278 0
|
10月前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
200 0
|
6月前
|
Java 开发工具 Maven
【01】完整的安卓二次商业实战-详细的初级步骤同步项目和gradle配置以及开发思路-优雅草伊凡
【01】完整的安卓二次商业实战-详细的初级步骤同步项目和gradle配置以及开发思路-优雅草伊凡
650 6
|
8月前
|
存储 Android开发 数据安全/隐私保护
Thanox安卓系统增加工具下载,管理、阻止、限制后台每个APP运行情况
Thanox是一款Android系统管理工具,专注于权限、后台启动及运行管理。支持应用冻结、系统优化、UI自定义和模块管理,基于Xposed框架开发,安全可靠且开源免费,兼容Android 6.0及以上版本。
981 4
|
11月前
|
数据采集 JSON 网络安全
移动端数据抓取:Android App的TLS流量解密方案
本文介绍了一种通过TLS流量解密技术抓取知乎App热榜数据的方法。利用Charles Proxy解密HTTPS流量,分析App与服务器通信内容;结合Python Requests库模拟请求,配置特定请求头以绕过反爬机制。同时使用代理IP隐藏真实IP地址,确保抓取稳定。最终成功提取热榜标题、内容简介、链接等信息,为分析热点话题和用户趋势提供数据支持。此方法也可应用于其他Android App的数据采集,但需注意选择可靠的代理服务。
460 11
移动端数据抓取:Android App的TLS流量解密方案