在create-react-app上运行构建后的空白页

Krz*_*dyl 2 reactjs netlify create-react-app

尝试在netlify上部署create-react-app,但是我的构建是空白页。我正在使用.env文件加载firebase api密钥,这是构建问题吗?

即使当我尝试在其计算机上的空白页上本地打开它并在控制台中输出错误:“使用源“ file:///event-app/static/js/main.108757a0.js加载失败””

package.json:https : //gist.github.com/Verthon/f82371ad2bb636b2e95c5b7697aa0bb5

?  event-app git:(master) ? npm run build

> event-app@0.1.0 build /home/jurr/Projects/event-app
> node scripts/build.js

Creating an optimized production build...
Compiled with warnings.

./src/components/Router.js
  Line 12:  'withFirebase' is defined but never used  no-unused-vars

./src/components/Firebase.js
  Line 21:  'Firebase' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  282.86 KB  build/static/js/main.108757a0.js
  3.1 KB     build/static/css/main.8e671453.css

Run Code Online (Sandbox Code Playgroud)

Zac*_*ten 35

如果您正在使用react-router并尝试index.html直接在浏览器中打开(或使用电子,本质上是这样做的),除了homepage按照其他人的建议进行设置外,请将您的替换BrowserRouterHashRouter.


我试图使用 create-react-app 构建一个电子应用程序。在开发中运行时一切正常,但是当我构建 CRA 然后将电子应用程序指向index.html文件时,我得到了空白页。

我发现这和index.html直接在浏览器中打开文件完全一样。大家都说“设置homepagepackage.json”,但我已经有了这一点。所以现在怎么办!?

我最终发现问题是react-router. 我正在使用一个BrowserRouter. 切换到一个HashRouter解决了我的问题。

  • 老兄,还救了我的命。你知道 HashRouter 为何起作用吗? (2认同)
  • `HashRouter` 之所以有效,是因为 URL 中“#”之后的任何内容都不会发送到“服务器”。URL 的该部分仅由react-router 解释。 (2认同)
  • 感谢您的回答。这是可行的,但在我尝试点击另一个页面后无法重定向。 (2认同)
  • “HashRouter”与“react-router-dom”完美配合。 (2认同)
  • 这!谢谢你拯救了生命,伙计。我们有详细说明的文档吗? (2认同)
  • 这证明并非所有英雄都穿着斗篷。如果有人对 HashRouter 的更多详细信息感兴趣,请参阅 /sf/answers/3638324861/ (2认同)

小智 26

添加"homepage": ".",你的package.json然后再次构建。


adi*_*gil 11

正如 Verthon 所说,将 放在"homepage": ".",你的 package.json 文件中,像这样在顶层

{
     "name": "myApp",
     "homepage": ".",
     // all other package.json stuff...
}
Run Code Online (Sandbox Code Playgroud)


Oys*_*ein 7

Oooor,因为我刚刚发现我一次又一次地这样做:您发布了公共文件夹而不是构建文件夹。

在此处输入图片说明


Krz*_*dyl 5

我已经通过homepage: "."根据此文档设置https://facebook.github.io/create-react-app/docs/deployment解决了问题

  • 即使添加“。”后我仍然得到空白页。作为主页。有关其他可能错误的任何线索 (4认同)
  • 是的,请参阅下面的[我的答案](/sf/answers/4429450651/)。 (2认同)
  • 它解决了我的问题,但是如果我给我的主页一个像“.”这样的值,我如何在 github 上托管我的应用程序 ? (2认同)