在完成 Vue3 + H5 的移动端开发后，如果希望生成一份可以直接安装到手机上的 安卓 APK 程序 ，可以借助 HBuilderX 来完成。使用 HBuilderX 可以快速将 Vue3 + H5 项目 打包成安卓应用，无需复杂的原生开发环境，非常适合前端快速交付移动端应用。测试阶段用默认证书即可，正式发布需使用自有证书。本篇随笔介绍基于已有的H5端应用，打包发布安 卓 APK 程序 ，然后部署在安卓的平板上的实际运行效果。
1、准备工作
-
安装 HBuilderX
从 DCloud 官网 下载并安装最新版本的 HBuilderX。
建议选择 完整版，内置 uni-app 打包工具。
-
注册 DCloud 账号
用于云打包，需要登录 HBuilderX。
-
准备安卓签名证书（可选）
-
如果是测试版，可使用 HBuilderX 的 测试证书。
-
如果是正式上线，建议使用自己生成的签名证书（
.keystore文件）。
-
4、发行 → 原生App-云打包
-
-
填写打包信息：
-
App名称：显示在手机上的名称
-
AppID：唯一标识
-
版本号 / 版本名称：用于应用市场更新
-
应用图标 & 启动图：建议准备不同分辨率的图片
-
-
选择签名方式：
-
测试证书：适合调试
-
自有证书：适合发布到应用商店
-
-
2、项目创建和相关设置
首先需要创建一个默认模板的空白项目，如下所示。
然后我们修改项目的起始文件【pages\index\index.vue】, 指定它加载的时候，转到我们的H5端地址页面即可。
如我们修改起始的视图页面，让它加载一个webView视图加载我们制定的H5段的URL即可。
<template>
<view class="content">
<!-- 移动APP端访问的H5端地址 -->
<web-view src="http://www.iqidi.com:8849"></web-view>
</view>
</template>设置项目的基础信息和图标信息。
图标信息，则是选择一个已有的图标，然后让工具生成其他规格尺寸的图标即可。
3、项目云打包为安装文件
在HBuilderX的项目视图中，找到【发行】【App-Andriod/iOS-云打包】菜单执行
在弹出的界面中进行选择对应的功能选项即可进行打包
如果一切顺利，那么确认后，HBuilderX工具会转到控制台进行提示打包的状态，如下所示。
接着可以看到有提示。
可以打开连接进行在线查看队列。如果不差钱，可以购买打包服务进行快速的打包。
如果需要免费打包，那么等待一段时间即可成功打包安卓APP的APK文件。
打开目录后，就可以看到完成的安卓App 安装文件APK。
大功告成后，我们把该文件发送到手机端或者IPAD端（Android平台）进行运行安装即可。这样安装后，我们看到的APP就和原生的样子没有太多的差异了，这种方式比扫码或者打开连接的方式，运行程序更加的方便。
4、程序在IPAD端的运行效果
打包完成后，通过微信或者QQ传文件到安卓的平板，以OPPO的平板进行测试。单击安装的APK文件安装，提示信息如下，确认继续安装即可。
安装后，在应用图标上会增加我们刚刚新增的APP，单击运行即可看到熟悉的启动界面效果了。
以上就是利用HBuilder进行H5移动端的打包，然后部署在安卓的平板上的实际运行效果。