关于使用 create-react-app 托管 Firebase 的两个问题的原因(1. Uncaught SyntaxError: Unexpected token <, 2. White Blank Page in Hosting URL)

时间:2021-01-07 16:49:50

标签: reactjs firebase browser create-react-app firebase-hosting

我需要您的帮助,提供问题的技术原因以及我在个人项目中找到的解决方案。 使用 Firebase CLI 工具部署我的应用时会出现此问题。

  • 我的应用是用 create-react-app 制作的。

我的问题是:为什么下面的 Issue.1 和 Issue.2 会发生?

我想知道基于技术事实的技术原因,但如果你让我知道可能的技术领域,我也很感激。 我想这可能是因为像 Bundling 这样的部署过程或我根本不知道的东西。

  • 针对这两个问题的解决方案是将构建文件夹(而不是公共文件夹)设置为公共目录。
  • 注意发生问题的不同网址(Localhost 3000 或托管网址)。

... 问题 1 = 在 localhost 3000 中,错误消息 Uncaught SyntaxError: Unexpected token < is sent.

  • 我做了什么
  1. 在 CLI 中,使用 Firebase CLI 进行部署

:设置公用文件夹为应用公用文件夹。

:从 firebase init 命令部署。

:对激活重写回答“否”。

:回答是覆盖 index.html

:回答是覆盖 404.html

:npm run deploy 快捷命令(npm run build + firebase deploy)。

  • 可能的原因:我发现在 Firebase CLI 过程中将公共文件夹(而不是构建文件夹)设置为公共目录时会发生此问题。
  • Pic.1 = Issue.1/在 CLI 中,firebase init 之后的过程。
  • Pic.2 = Issue.1/App Directory & public/index.html/由 firebase init 添加的内容的顶部
  • Pic.3 = Issue.1/Localhost 3000
  • Pic.4 = Issue.1/托管页面

... 问题 2 = 在托管 URL 中,UI 为空白

  • 我做了什么
  1. 在 public/index.html

:删除firebase init命令添加的所有内容。

:添加<div id="root">

  1. 在 CLI 中,使用 Firebase CLI 进行部署

: npm run deploy 快捷命令。

  • 可能的原因:我看到此问题发生在 1. 将公共文件夹(而不是构建文件夹)设置为公共目录 2. 在 Firebase CLI 过程中激活覆盖 public/index.html 文件。
  • Pic.5 = Issue.2/App Directory & public/index.html
  • Pic.6 = Issue.2/托管页面
  • Pic.7 = Issue.2/Localhost 3000(通过 firebase init 命令删除 public/index.html 中添加的内容来解决 Issue.1 的证明)。

... 解决方案案例。

  • 将构建文件夹作为公共目录将是解决方案。
  • 我做了什么
  1. 在 CLI 中,使用 Firebase CLI 进行部署

:将构建文件夹设置为应用公用文件夹。

:从 firebase init 命令部署。

:回答是激活重写。

:回答是覆盖 build/index.html

:回答是覆盖 build/404.html

: npm run deploy 快捷命令。

...

...

如果需要更多信息,请告诉我。

我感谢任何建议!

0 个答案:

没有答案