HBuilderX将React移动端项目打包成apk，并在模拟器进行展示

最新推荐文章于 2026-06-19 10:01:52 发布

原创最新推荐文章于 2026-06-19 10:01:52 发布 · 6.8k 阅读

47 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #app #HBuilderX #HBuilderX打包

HBuilderX 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何将React移动端项目通过HBuilderX打包成apk，并在模拟器上进行展示。首先确保项目配置正确，如设置`homepage`为`./`，使用在线接口。接着，使用HBuilderX新建APP项目，导入打包后的文件，配置`manifest.json`，包括基础信息、图标、启动画面和模块。完成配置后，试运行项目，无误后进行云打包生成APK。最后，在模拟器如mumu上安装并展示apk，完成测试。

该文章已生成可运行项目，

文章目录

HBuilderX将React移动端项目打包成apk，并在模拟器进行展示

HBuilderX将React移动端项目打包成apk，并在模拟器进行展示

目前使用React技术栈开发的项目很多，很多同学想着把React开发好的移动端项目通过HBuilderX把项目打包成apk安装在手机或者模拟器上进行测试。目前网上有很多把Vue项目通过HBuilderX把项目打包成apk的文章，对于React移动端项目打包成apk文章非常少，这就是写本次文章的初衷，希望该文章能够帮助各位同学，对同学今后的学习和测试有所帮助。

一、项目打包前配置和打包

1、项目打包前配置

项目开发完毕后，为了保证开发好的项目打包之后能够正常显示：

①、在项目打包之前需要在package.json文件中添加 "homepage": "./"（只要在package.json文件中添加"homepage": "./"打包好的项目就能够正常访问到静态资源,避免项目打开后出现空白页面。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bwGdIxs4-1634132339535)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013162807378.png)]

②、项目中的接口一定要使用在线接口，不要使用本地接口，要不然打包出来的项目仍然是空白页**（非常重要）

2、项目打包

以上配置和检查完之后，在终端中找到项目根目录，运行打包命令 npm run build

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AX31YPq8-1634132339539)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013165020661.png)]

npm run build命令执行完之后，项目根目录中就生成一个build目录。
在这里插入图片描述

build目录的文件就是生成apk必要文件

二、使用HBuilderX把打包好的项目打包成apk文件

0、HBuilderX下载及注册账号

HBuilderX下载地址：https://www.dcloud.io/hbuilderx.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jJAEsDt6-1634132339541)(React移动端项目使用HBuilderX打包成apk，并在模拟器进行展示效果.assets/image-20211013170518024.png)]

下载之后，打开HBuilderX，注册登录账号，注册之后进行登录

在这里插入图片描述

1、使用HBuilderX新建APP项目

在这里插入图片描述

创建完毕后的APP项目目录如下所示：

css、img、js 目录是静态目录，项目打包后的静态资源可以放到对应的这些目录中，unpackage目录是今后打包成生成apk的目录，里面会存放跟生成apk相关的文件，index.html文件是首页启动文件，运行打包命令时需要在这个文件中进行，manifest.json文件打包的配置文件里面有各项配置项。