保姆式教学-Vue项目打包成apk

新建一个app模版用来打包

使用HbuilderX来进行打包,这里选择5+App,选择一个默认模版就行

这是新建好的一个模版,包含了静态文件和入口等信息

manifest.json是一些app的配置,比如app的图标,启动界面等配置,在Hbuilderx中打开manifest.json能直接的进行app的配置

打包你的vue项目

如果你也一样是vue的项目,使用npm run build进行打包

打包后你能看到一个dist的打包后的文件夹,这也就是需要放到模版中的。

处理模版

把模版删除成上图的样子,留下unpackagemanifest,模版中的index.html和静态文件都是模版自带的,我们需要利用的只是他的unpackagemanifest配置文件,这里做一个替换,把dist文件夹中的静态文件和入口文件来做一个替换

上图是dist中的内容,放到模版中

Hbuilder云打包

HBuilder 提供了云打包功能,可以帮助开发者将基于 HTML5 技术开发的移动应用打包成原生应用,并支持发布到各大应用商店,如 App Store、华为应用市场、小米应用商店等。 使用 HBuilder 云打包,开发者可以轻松地将自己的 Web 应用转化为原生移动应用,并且无需掌握复杂的移动应用开发技术。通过简单的配置和操作,即可实现应用的打包和发布。 云打包通常是基于云端的服务,开发者只需要将自己的项目上传至云端,选择相应的打包配置,即可生成原生应用包。云打包服务会自动处理应用的编译、打包和签名等过程,大大简化了移动应用的发布流程。

在工具栏选择发行-云打包

如果是第一次进行打包,可能需要登录Dcloud的账号,给你的应用生成一个appid

然后进入打包页面,这里的广告可以自行选择去掉,直接使用快速打包即可,由于是测试用不是正式上架,这里选择使用公共测试证书即可,如果需要上架等可以使用自有证书,直接去按照步骤生成一个即可。

在云打包排队进行打包,打包后会提供apk的生成地址,可以直接发送到安卓机进行调试,也可以用模拟器来进行调试。

模拟器

直接将打包好的apk拖动到模拟器中,模拟器会自动进行安装

最后

到这一步vue项目打包成apk就已经是成功了,这个apk包可以到安卓机中安装和模拟器中安装,由于用到的是公共测试证书,安装的app只能用于自测,如果是要正式上线,需要自己申请证书。

如果觉得有趣或有收获,请关注我的更新,给个喜欢和分享。您的支持是我写作的最大动力!

往期好文推荐

相关推荐
盖伦发发6 分钟前
SpringCloud Alibaba Sentinel 教学:限流、熔断、降级、线程/信号量隔离、活动过载保护
后端·软件工程
java_nnnn16 分钟前
面试题(网络部分前传)-13问
服务器·网络·网络协议·tcp/ip·面试
Setsuna_F_Seiei7 小时前
前端转型 Agent 开发 04 之 MCP 与 Skill(赋予 Agent 更广工作能力)
前端·agent
考虑考虑8 小时前
数据库中的EXISTS
运维·数据库·后端
刘发财8 小时前
前端2秒生成500页矢量PDF,rust真的强到没朋友
前端·javascript·rust
找方案9 小时前
AI+人力资源:AI招聘面试的兴起与争议
人工智能·面试·职场和发展
郑州光合科技余经理9 小时前
国际版外卖系统:税率字段怎么和订单主流程解耦
android·java·开发语言·前端·后端·php·ai编程
毅炼9 小时前
Rover-Suite 开源发布:轻量服务注册中心与网关一体化方案
java·后端·系统架构·gateway
梦想平凡9 小时前
百游棋牌源代码开发搭建教程(十):隔离部署、备份恢复与双端验收
java·前端·javascript·数据库·源代码管理
yume_sibai11 小时前
06-Rust Web 开发实战(Axum 框架 + 数据库 + JWT 认证 + 中间件 + 部署)
前端·数据库·rust