react中嵌入网页_React嵌入APP，需要的一些答案

这篇文，是从React开发者角度出发，适用于，打算把Reactjs写的Web页面嵌入原生APP中，实现混合开发。

一、资源文件路径问题——PUBLIC_URL

如果你使用create-react-app创建项目，执行命令 yarn build 后，直接以静态方式打开build文件夹内的index.html,会看到页面显示出现问题，打开console后会看到js、css、svg等文件的路径出现问题。

build文件夹

由于目标是为了嵌入APP中，你只可能把静态文件交付给APP开发的同学，这个问题是必须解决的。

从错误路径可以看到，路径是直接从系统根目录开始写的，就是说，build之后资源引用路径是以build为根目录书写的，所以需要把所有资源文件路径都变成./的方式才能以静态的方式正确的读到static文件夹里的文件。

可是，如果页面中引用了很多资源文件图片、视频、字体等，不可能一个个去自动建立好的文件里去找再修改路径，这时就可以在yarn build命令前设置PUBLIC_URL。

windows系统下：

set PUBLIC_URL=./ yarn build

mac、linux系统下：

PUBLIC_URL=./ yarn build

完成后直接打开index.html，页面便可以正常显示了。

如果react中还使用了路由，我的经验推荐是使用HashRouter就可以正常的使用路由了。

二、嵌