【问题标题】:Create React App Blank Page when including on existing site包含在现有网站上时创建 React App 空白页面
【发布时间】:2019-05-15 21:20:47
【问题描述】:

我在本地使用 XAMPP 来托管现有的 CMS,我想通过使用 include 将我的 react 应用程序包含在 CMS 中(这适用于包含静态 HTML 和其他 PHP 页面)。将包含它的 CMS 管理页面如下所示:http://localhost/website/administrator/

我需要将我的 create-react-app 放在这样的文件夹中,以便内置的 CMS 脚本包含它:website\subfolder1\subfolder2\subfolder3\subfolder4\default

目前我得到一个空白页面,我试图在其中包含我的应用程序。如果我删除嵌入的,我可以看到标记正在输出,就像在一个带有根类名的空 div 中一样。

我尝试在我的 package.json 中设置一个“主页”属性和各种组合,例如“。”,并且还编辑了清单 site_start,但没有运气,我似乎无法让它呈现。谁能指出我正确的方向?

【问题讨论】:

  • 打开控制台,如果是react的问题,可能会报错...
  • @Vencovsky 感谢您的回复,但控制台中没有错误。我认为这是某种 webpack 配置错误。只是为了澄清,我也可以做一个无构建应用程序,只需通过 html 文档中的 cdn 进行反应,它工作正常,因此 CMS 没有问题,也包括反应。似乎表明 site_start 设置或“主页”设置存在问题,或两者兼而有之。
  • 您是否尝试过制作 create-react-app 的副本,然后弹出 create-react-app 并在 webpack 配置中更改捆绑包的构建位置?
  • 感谢@RobertAnderson,这听起来像是我需要做的事情才能让它工作。你能再澄清一点我将如何去做吗?目前我已经尝试构建应用程序并将文件夹重命名为 CMS 正在寻找的“默认”文件夹。我还尝试手动编辑 js 和 css 文件的 index.html 路径,以确保它们正确加载。
  • @Rallen 是的 :)

标签: javascript reactjs create-react-app


【解决方案1】:

您可以尝试以下一些步骤来正确构建捆绑包,因为您需要通过弹出来覆盖 create-react-app 的默认行为。

  1. 制作您的 create-react-app 的备份副本
  2. Eject,这样你现在就可以配置 webpack n

npm run eject
  1. 进入 webpack 配置,查看脚本部分

  2. 您可以更改构建脚本,例如启动和构建

  3. 问题似乎出在构建 js 和 css 文件的位置。您可以通过编辑配置来更改它们在 webpack 中的输出位置。

查看链接:https://webpack.js.org/configuration

您可以尝试将输出部分的路径更改为您的 cms html 尝试查找捆绑包的位置。

【讨论】:

  • 谢谢。我会试一试,我相信答案就在这里。
猜你喜欢
  • 1970-01-01
  • 2019-11-20
  • 1970-01-01
  • 2018-11-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-29
  • 2020-04-27
相关资源
最近更新 更多