react项目打包部署到云服务器 react打包apk

转载

mob64ca13f937ae 2024-02-26 19:28:09

文章标签 react项目打包部署到云服务器 react.js app HBuilderX HBuilderX打包 文章分类 云服务云计算

文章目录

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

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

1、项目打包前配置
2、项目打包

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

0、HBuilderX下载及注册账号
1、使用HBuilderX新建APP项目
3、把项目打包的文件，移动到HBuilderX新建APP项目中
4、配置APP项目中`manifest.json`文件

4.1 基础配置
4.2 图标配置
4.3 启动界面配置
4.4 模块配置

5、使用HBuilderX试运行打包后的项目
6、使用HBuilderX打包成APK文件

6.1 点击菜单栏中【发行】--> 【原生App-云打包】，打包生成APK文件
6.2 选择【使用公共测试证书】，然后点击【打包】

三、使用模拟器展示打包好的apk文件

1、下载和安装模拟器
2、在模拟器中展示apk文件

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

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

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

1、项目打包前配置

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

①、在项目打包之前需要在package.json文件中添加 "homepage": "./"（只要在package.json文件中添加"homepage": "./"打包好的项目就能够正常访问到静态资源,避免项目打开后出现空白页面。

react项目打包部署到云服务器 react打包apk_HBuilderX打包

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

2、项目打包

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

react项目打包部署到云服务器 react打包apk_react.js_02

npm run build命令执行完之后，项目根目录中就生成一个build目录。

react项目打包部署到云服务器 react打包apk_react.js_03

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

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

0、HBuilderX下载及注册账号

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

react项目打包部署到云服务器 react打包apk_HBuilderX打包_04

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

react项目打包部署到云服务器 react打包apk_HBuilderX打包_05

1、使用HBuilderX新建APP项目

react项目打包部署到云服务器 react打包apk_react.js_06

react项目打包部署到云服务器 react打包apk_react.js_07

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

react项目打包部署到云服务器 react打包apk_HBuilderX_08

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