一、写在前面✨
大家好!我是初心,很高兴再次和大家见面。
今天跟大家分享的文章是 如何将Vue项目打包成apk,即安卓安装包
,希望能帮助到大家!本篇文章收录于 初心 的 安卓开发 专栏。
🏠 个人主页:初心%个人主页
🧑 个人简介:大家好,我是初心,和大家共同努力
💕欢迎大家:这里是CSDN,我记录知识的地方,喜欢的话请三连,有问题请私信😘
事情是这样的:遇到一个需求,希望将Vue项目发布为apk,于是开始了解,下面是我整理的发布笔记,供大家参考。
二、Hbuilder X准备💕
为什么要使用Hbuilder X?
因为Hbuilder X提供了发布为app的功能,所以这里选择的是Hbuilder X。
2.1 Hbuilder X简介
Hbuilder X的宣言是:为极客、为懒人、为你,这是Hbuilder X的官网:Hbuilder X官网。
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。
创建成功后,得到如下的文件目录:
3.3 替换文件
将css,img,js,index.html文件删除,只留下unpackage和manifest.json文件:
将dist目录下的所有文件拷贝到文件根目录下(我这里是test目录):
3.4 编写manifast.json文件
- 基础配置
- 图标配置
- 模块配置
- 其他配置
其他配置根据自己的需求进行配置就好了。
将这些选项配置好之后,manifest.json文件就配置好了。
3.5 app云打包
点击原生app-云打包:
如果是第一次打包,需要下载一些插件,下载即可。
打包成功之后就会生成一个 apk 文件,大家就可以发送到手机安装啦!
四、总结撒花😊
本文主要讲解了如何使用Hbuilder X将Vue项目打包成apk文件,用于app开发。😊
✨ 这就是今天要分享给大家的全部内容了,我们下期再见!😊
🏠 本文由初心原创,首发于CSDN博客, 博客主页:初心%🏠
🏠 我在CSDN等你哦!😍文章来源:https://www.toymoban.com/news/detail-448043.html
文章来源地址https://www.toymoban.com/news/detail-448043.html
到了这里,关于安卓开发 | 将Vue项目打包为app的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!