使用HBuilderX把Vue3+Vant4的H5端应用打包为安卓App应用程序
<p>在完成 Vue3 + H5 的移动端开发后，如果希望生成一份可以直接安装到手机上的 <strong data-start="164" data-end="177">安卓 APK 程序</strong>，可以借助 <strong data-start="183" data-end="196">HBuilderX</strong> 来完成。使用 <strong data-start="1333" data-end="1346">HBuilderX</strong> 可以快速将 <strong data-start="1353" data-end="1369">Vue3 + H5 项目</strong>打包成安卓应用，无需复杂的原生开发环境，非常适合前端快速交付移动端应用。测试阶段用默认证书即可，正式发布需使用自有证书。本篇随笔介绍基于已有的H5端应用，打包发布<strong>安</strong><strong data-start="164" data-end="177">卓 APK 程序</strong>，然后部署在安卓的平板上的实际运行效果。<strong data-start="164" data-end="177"><br></strong></p><h3>1、准备工作</h3>
<ol data-start="226" data-end="514">
<li data-start="226" data-end="359">
<p data-start="229" data-end="359"><strong data-start="229" data-end="245">安装 HBuilderX</strong><br data-start="245" data-end="248">
从 DCloud 官网 下载并安装最新版本的 HBuilderX。<br data-start="324" data-end="327">
建议选择 <strong data-start="335" data-end="342">完整版</strong>，内置 uni-app 打包工具。</p>
</li>
<li data-start="361" data-end="407">
<p data-start="364" data-end="407"><strong data-start="364" data-end="380">注册 DCloud 账号</strong><br data-start="380" data-end="383">
用于云打包，需要登录 HBuilderX。</p>
</li>
<li data-start="409" data-end="514">
<p data-start="412" data-end="430"><strong data-start="412" data-end="428">准备安卓签名证书（可选）</strong></p>
<ol>
<li data-start="434" data-end="470">
<p data-start="436" data-end="470">如果是测试版，可使用 HBuilderX 的 <strong data-start="459" data-end="467">测试证书</strong>。</p>
</li>
<li data-start="474" data-end="514">
<p data-start="476" data-end="514">如果是正式上线，建议使用自己生成的签名证书（<code data-start="498" data-end="509">.keystore</code> 文件）。</p>
</li>
</ol></li>
</ol>
<p data-start="851" data-end="892"> 4、<strong data-start="874" data-end="892">发行 → 原生App-云打包</strong></p>
<ul>
<li style="list-style-type: none">
<ul>
<li data-start="894" data-end="1021">
<p data-start="897" data-end="906">填写打包信息：</p>
<ul data-start="910" data-end="1021">
<li data-start="910" data-end="933">
<p data-start="912" data-end="933"><strong data-start="912" data-end="921">App名称</strong>：显示在手机上的名称</p>
</li>
<li data-start="937" data-end="955">
<p data-start="939" data-end="955"><strong data-start="939" data-end="948">AppID</strong>：唯一标识</p>
</li>
<li data-start="959" data-end="986">
<p data-start="961" data-end="986"><strong data-start="961" data-end="975">版本号 / 版本名称</strong>：用于应用市场更新</p>
</li>
<li data-start="990" data-end="1021">
<p data-start="992" data-end="1021"><strong data-start="992" data-end="1006">应用图标 & 启动图</strong>：建议准备不同分辨率的图片</p>
</li>
</ul>
</li>
<li data-start="1023" data-end="1082">
<p data-start="1026" data-end="1035">选择签名方式：</p>
<ul data-start="1039" data-end="1082">
<li data-start="1039" data-end="1056">
<p data-start="1041" data-end="1056"><strong data-start="1041" data-end="1049">测试证书</strong>：适合调试</p>
</li>
<li data-start="1060" data-end="1082">
<p data-start="1062" data-end="1082"><strong data-start="1062" data-end="1070">自有证书</strong>：适合发布到应用商店</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3>2、项目创建和相关设置</h3>
<p>首先需要创建一个默认模板的空白项目，如下所示。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250827152828320-883182337.png" alt="image" width="751" height="636" loading="lazy"></p>
<p>然后我们修改项目的起始文件【pages\index\index.vue】, 指定它加载的时候，转到我们的H5端地址页面即可。</p>
<p>如我们修改起始的视图页面，让它加载一个webView视图加载我们制定的H5段的URL即可。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">template</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="content"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)"> 移动APP端访问的H5端地址 </span><span style="color: rgba(0, 128, 0, 1)">--></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">web-view </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="http://www.iqidi.com:8849"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">web-view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">template</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p>
<p>设置项目的基础信息和图标信息。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250827152325511-1523027373.png" alt="image" width="680" height="396" loading="lazy"></p>
<p>图标信息，则是选择一个已有的图标，然后让工具生成其他规格尺寸的图标即可。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250827152611203-1982606533.png" alt="image" width="679" height="638" loading="lazy"></p>
<p> </p>
<h3>3、项目云打包为安装文件</h3>
<p>在HBuilderX的项目视图中，找到【发行】【App-Andriod/iOS-云打包】菜单执行</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250827151502092-470098332.png" alt="image" width="691" height="245" loading="lazy"></p>
<p>在弹出的界面中进行选择对应的功能选项即可进行打包</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250827151914495-1340960801.png" alt="image" width="702" height="834" loading="lazy"></p>
<p> 如果一切顺利，那么确认后，HBuilderX工具会转到控制台进行提示打包的状态，如下所示。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250827145445829-944756434.png" alt="image" width="597" height="151" loading="lazy"></p>
<p>接着可以看到有提示。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250827150048809-1728131076.png" alt="image" loading="lazy"></p>
<p>可以打开连接进行在线查看队列。如果不差钱，可以购买打包服务进行快速的打包。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250827145840755-945898140.png" alt="image" width="937" height="250" loading="lazy"></p>
<p>如果需要免费打包，那么等待一段时间即可成功打包安卓APP的APK文件。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250827151152260-635277600.png" alt="image" width="943" height="179" loading="lazy"></p>
<p> 打开目录后，就可以看到完成的安卓App 安装文件APK。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250827151344602-1952829741.png" alt="image" width="820" height="213" loading="lazy"></p>
<p> 大功告成后，我们把该文件发送到手机端或者IPAD端（Android平台）进行运行安装即可。这样安装后，我们看到的APP就和原生的样子没有太多的差异了，这种方式比扫码或者打开连接的方式，运行程序更加的方便。</p>
<h3>4、程序在IPAD端的运行效果 </h3>
<p> 打包完成后，通过微信或者QQ传文件到安卓的平板，以OPPO的平板进行测试。单击安装的APK文件安装，提示信息如下，确认继续安装即可。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250828142857565-854630108.jpg" alt="b652c7831c1506525d4d162c710282b8" width="442" height="316" loading="lazy"></p>
<p>安装后，在应用图标上会增加我们刚刚新增的APP，单击运行即可看到熟悉的启动界面效果了。</p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250828143413344-1627489620.png" alt="image" width="364" height="509" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/8867/202508/8867-20250828143232134-1679110205.png" alt="image" width="362" height="506" loading="lazy"></p>
<p> 以上就是利用HBuilder进行H5移动端的打包，然后部署在安卓的平板上的实际运行效果。</p>
</div>
<div id="MySignature" role="contentinfo">
<div style="border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid; padding-right: 5px; border-top-color: #cccccc; border-top-width: 1px; border-top-style: solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left-color: #cccccc; border-left-width: 1px; border-left-style: solid; width: 98%; padding-top: 4px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid; background-color: #eeeeee;">
<img src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top" alt>
<span style="color: #000000"><span class="Apple-tab-span" style="white-space: pre"></span>
专注于代码生成工具、.Net/Python 框架架构及软件开发，以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架、Python开发框架等框架产品。
<br> 转载请注明出处：撰写人：伍华聪 http://www.iqidi.com <br> </span></div><br><br>
来源：https://www.cnblogs.com/wuhuacong/p/19060998
頁:
[1]