如何将 React 应用程序部署到我的 WordPress 网站？

Question

我是 React 新手，正在尝试将我的 React 站点添加到服务器，以便我可以测试 php 表单处理脚本。我已经运行了 npm run build 命令并将生成的“dist”文件夹上传到可以显示静态 html 文件的服务器文件夹。

当我尝试导航到新 URL 时，控制台中出现此错误 -

查看错误消息，浏览器似乎在错误的位置寻找资源文件夹，应该在其之前添加 /dist/ 文件夹。

看起来正在加载初始的index.html页面，正如标题所反映的那样，除了屏幕是空白的之外。

更多信息 - 我正在将网站加载到包含 Wordpress 网站的 URL，因此将 dist 文件添加到 public_html 文件夹中。

我也许应该补充一点，我使用 npx create-vite 来创建应用程序，而不是 npx create-react-app

如有任何帮助，我们将不胜感激:)

Answer 1

您必须重新定义/static文件的路径，在这种情况下，您必须根据应用程序在服务器上所在文件夹的路径在index.html文件中更改它。

Answer 2

如果您想将 React 应用程序嵌入 WordPress 网站的页面上，我建议您使用 iframe，因为 WordPress 使用 apache2 或 nginx 等网络服务器工具呈现 php 代码。这个博客一定有帮助： https://javascript.plainenglish.io/how-to-embed-a-react-app-inside-a-wordpress-website-923e0af0ea00

此外，您还可以使用我为您找到的这个扩展（我没有测试过它，只是看到了有关它的演示）： https://wordpress.org/plugins/reactpress/

那么接下来的方法

如果您只想将 React 应用程序部署为主机中的静态网站，只需在 public_html 文件夹中创建一个目录并将 React 构建的静态文件放入其中（要点：有时取决于您的代码库，React 静态构建取决于目标部署服务器或主机的Web服务器上的域和路径，您必须在构建之前在config中设置域和路径，或者您可以只在htaccess文件中处理react的路由） 此链接对您有帮助： https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6 （注意在level文件目录中添加htaccess文件，以免对您的WordPress网站造成任何损害）

要快乐:)