React随记： React项目打包及在手机APP项目中运行

最新推荐文章于 2024-10-30 16:37:02 发布

鸡肋佐

最新推荐文章于 2024-10-30 16:37:02 发布

阅读量924

点赞数

分类专栏： React随记 H5随记文章标签： python 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_38201372/article/details/128660299

版权

React随记同时被 2 个专栏收录

5 篇文章

订阅专栏

H5随记

5 篇文章

订阅专栏

文章介绍了在React项目打包后放入APP中显示空白的解决方案，包括在`package.json`中添加`homepage`配置，将Router由BrowserRouter改为HashRouter，并详细说明了APP中运行H5页面的步骤，以及解释了为何需要将build文件放在服务器根目录或正确配置homepage字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

一、React项目打包

二、APP项目中运行

1.修改package.json 配置文件

2.修改Router

3.APP项目中运行

三、原因

前言

在做一个手机APP项目，采用App+H5混合开发，App的壳子嵌入H5页面，H5项目是用React框架写的。发现React项目打包后放入App项目，H5页面打开是空白的。已经解决，先记录一下。参考文章如下链接

react项目打包后点击index.html页面出现空白 - 七维空间 - 博客园

一、React项目打包

React项目打包流程可参考我的这篇文章，不负赘了。

React随记：React项目打包、serve服务器启动项目_鸡肋佐的博客-优快云博客

二、APP项目中运行

1.修改`package.json` 配置文件

在打包之前,在 package.json 中添加"homepage": "./"配置项

2.修改Router

React项目组件可以用BrowserRouter和HashRouter两种方式包裹， APP项目中运行中引用路由时要用HashRouter,（出问题是因为我用了BrowserRouter）然后按上面（一、React项目打包）再次执行打包流程，再点开index.html就不会报错

3.APP项目中运行

将打包后的文件压缩，拖入APP项目工程目录中，编写原生代码将h5.zip解压到沙盒，并通过原生WebView组件加载打开h5/index.html。

如上就成功滴将H5页面嵌入到APP项目当中了！！！！！！

三、原因

你必须把build里的文件直接放到应用服务器的根路径下，比如，你的服务器IP是172.16.38.253，应用服务器端口为8080，你应该保证http://172.16.38.253:8080这种访问方式，访问到的是你的build下的文件。如果你希望以http://172.16.38.253:8080/build/index.htm这种方式访问应用，那么你可以在package.json文件中增加一个homepage字段。