打包React项目

利用HBuilderX进行项目(本文示例是react写的webapp打包成移动App)打包

打包后下载安装包即可体验功能。
1.执行打包命令 npm run build

npm run build

成功后如下图:
在这里插入图片描述
2 找到build文件夹下的index.html文件,点击在静态服务器中运行
在这里插入图片描述
3、若浏览器中报错,如下,路径错了。
在这里插入图片描述
4、在项目配饰文件中添加如下配置:
在这里插入图片描述
5.重新打包项目,再次运行即可!(配置之后在文件夹中直接右击打开也可以以正常运行!但是不建议这样打开)
6、打开HbuilderX创建一个新的5+App空项目 。将上一步打包后的项目中的bulid文件夹直接复制过来,覆盖hbuilder里面的内容。运行Hbulider项目的index.html文件,这时和react效果项目一样。
在这里插入图片描述

在这里插入图片描述
7、点击运行,运行在真机,若没有真机插件可以下载一下。将测试手机通过USB连接到电脑,就可以检测到手机。
8、点击发行,可以在手机上下载安装包后使用。可以在mainfest.json里面配置app相关配置。
9、点击打包后,若第一次徐进行身份验证,跟着做就好。
在这里插入图片描述
在这里插入图片描述
找到打包后的压缩文件的位置,在手机上下载。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值