html - Firebase 没有运行 index.html 文件

Question

我是一个非常新的程序员，正在阅读 Firebase 教程。我已经完成了本教程的步骤 1-5 ( https://codelabs.developers.google.com/codelabs/firebase-web/#5 )。我已将“将 Firebase 添加到您的网络应用程序”js 代码添加到 html 文件中，并设置了 Firebase CLI。但是，当我运行 firebase 服务器时，除了没有显示 index.html 文件中的代码之外，一切似乎都正常工作。

我在正确的目录中，我的控制台显示“服务器正在侦听：http://localhost:5000 ”。但是，在 localhost 5000，它显示了一个通用的“欢迎使用 Firebase 托管：您看到这个是因为您已经成功设置了 Firebase 托管。现在是时候构建一些非凡的东西了！” 框而不是 index.html 文件中的应用程序界面代码。它是我目录中唯一的 html 文件。好像我错过了一些非常简单的东西。谢谢您的帮助。

score 32 · Accepted Answer

显示给您的网站index.html来自您的public文件夹（或您在文件中配置的firebase.json任何内容）。

罪魁祸首可能是firebase init。它会尝试index.html为您生成一个通用文件。但是，在最新版本中，它至少应该询问您是否要覆盖（过去没有！）。

~~问题是firebase init令人难以置信的粗糙。它只是覆盖了index.html您public文件夹中的文件……没有确认，没有安全网，什么都没有。~~

如果您丢失或不小心firebase init覆盖了您的index.html文件，您必须以某种方式重新生成它。如果您没有备份或其他方法来重新生成您的index.html文件......好吧......太糟糕了！

Firebase CLI 是如何工作的？

通常，firebase设置的步骤如下所示：

firebase login
firebase init
your-build-command-here# (如果你有构建管道)
firebase deploy

您只需login在第一次在该机器上设置构建时执行步骤 #1 ( )（或者可能在发布新的 firebase 修订版时）

您只需要执行步骤 #2 ( init) 即可初始化一个新项目。也就是说，当您还firebase.json没有（将由init命令创建）时。

要重新部署，很简单：

your-build-command-here# (如果你有构建管道)
firebase deploy

score 27 · Accepted Answer

我想出了我的答案。发布的 index.html 文件位于“public”文件中，该文件是在“firebase init”阶段创建的。我用我的应用程序替换了那个占位符 html 文件。

score 12 · Accepted Answer

Firebase 托管未显示应用程序？

这个问题可能有两个原因

第一步：

确保包含 index.html 的公用文件夹（在 firebase.json 中定义）“dist”没有被 firebase init 命令修改，如果是，请将其替换为原始项目 index.html

供参考（dist 是标准的，但您可能会有所不同）

{ "hosting": { "public": "dist"} }

第二步：

确保在项目的 index.html 中配置您的基本 href

作为

<base href="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/">

和其他捆绑文件为

<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/runtime.a66f828dca56eeb90e02.js">

<script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/main.2eb2046276073df361f7.js">

第三步运行命令 - firebase deploy

请享用！;)

score 10 · Accepted Answer

新项目

选择firebase init包含的目录index.html作为公共目录时。

现有项目

更新firebase.json_

"hosting": {
    "public": "dist/directoryThatContainsIndexHtml",
     ......
  }

已编辑的原始答案：在编辑历史记录中可用。仅用于测试目的。！！对于生产，请使用更新版本。
每次构建时都会重写 dist 的内容，因此每次构建时您放置 @dist 的任何内容都会消失。

score 6 · Accepted Answer

对于其他遇到此问题的人。尝试以隐身模式启动 - 浏览器已为我缓存。

https://stackoverflow.com/a/56468177/2047972

score 4 · Accepted Answer

就我而言，当我运行命令时ng build --prod，它在 dist 文件夹下创建了一个子文件夹。假设我的项目名称是 FirstProject。我可以在 dist 文件夹 (dist/FirstProject) 中看到一个名为 FirstProject 的子文件夹。将 dist/[subDirectory] 作为您的公共目录

What do you want to use as your public directory? dist/FirstProject

这解决了我的问题

score 3 · Accepted Answer

在公用文件夹选项中写入 dist/your-folder-name。这将允许您渲染文件夹中的索引文件。

score 3 · Accepted Answer

有关将 Angular 应用程序部署到 Firebase 的简单快速教程，您可以在此处找到。

在 firebase init 的过程中，输入 N，当问题 “文件 dist/index.html 已经存在。覆盖？” 出现，您的页面将按原样显示。

score 3 · Accepted Answer

首先，您需要检查index.html项目部署后的情况。在这些命令步骤之后：

firebase login

firebase init

firebase deploy

您的真实index.html文件可能会被firebase覆盖，generic file这就是发生问题的原因。index.html所以在项目部署后更改代码。如果您在网页上看到此框

提示：在部署之前将您的完整项目复制到 PC 中的任何位置。

否则请检查您的目录中的文件路径，您的 index.html 路径必须正确。

score 2 · Accepted Answer

当您构建 Angular 应用程序时，至少在 Angular 10 中，默认情况下，Angular 会创建一个名为 dist 的文件夹，其中包含一个具有应用程序名称的文件夹。例如，这个示例的应用名为 blog-front，因此在构建项目时（ng build 或 ng build -- prod），Angular 会创建一个文件夹 dist，其中包含一个名为 blog-front 的文件夹：

当您到达询问公共目录的 firebase 初始化步骤时，对于此示例，您的文件夹名称应为“dist/blog-front”，或者一般规则为“dist/yourApplicationName”：

score 1 · Accepted Answer

就我而言， firebase 使用了错误的目录，另请参见此处：firebase CLI 无法识别“firebase init”的当前项目目录。虽然我期望 firebase 将所有创建的文件放入我的项目目录，但它完全断开连接并将所有文件放入我的 /Users/MyUserName 目录并从那里部署错误的 index.html。

这是修复它的方法（链接帖子中建议不需要重新安装firebase）：

从 /Users/MyUserName 目录（.firebaserc、firebase.json、index.html 和 dist 文件夹）中删除所有创建的 firebase 文件
在项目目录上运行 firebase init
使用 dist/projectname 作为公共目录
配置为单页应用“是”
不要覆盖 index.html（如果这样做，请确保在部署之前再次“ng build”）
火力基地部署

顺便说一句，对于使用 Angular 7 的每个人来说，这篇关于将 Angular 7 应用程序部署到 Firebase 托管的教程对我来说真的很有帮助。

score 1 · Accepted Answer

您看到此错误是因为您没有运行以下命令：

npm run build
确保你之前使用它firebase deploy
并且还使您的目录不正确。
在完成firebase init过程后执行此操作。

score 1 · Accepted Answer

我遇到了类似的情况。当我们运行 firebase init 时，它会问几个问题。那时我们提到了 firebase 将部署所有文件的目录路径。确保目录包含 index.html。

score 1 · Accepted Answer

这对我有用

First Stop the project and follow these steps

npm install -g firebase-tools

firebase login

firebase init

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes

After initialization is completed makesure to delete the created dist file before next steps

ng build --prod

firebase deploy

score 1 · Accepted Answer

npm install -g firebase-tools
firebase login
firebase init
firebase deploy
firebase open

向下滚动后选择以下

  Hosting: Deployed Site

score 1 · Accepted Answer

删除文件夹index.html中存在的内容。dist

然后运行以下命令：

firebase login

ng build --prod

firebase init

firebase deploy

score 0 · Accepted Answer

如果你得到一个带有准备好的index.html的公共文件夹。您可以简单地用您的 index.html 替换该index.html并使用以下命令：firebase init

firebase deploy

这应该足以让它工作。确保所有文件都在应有的位置！

score 0 · Accepted Answer

工作解决方案

flutter build web那就去做吧 flutter deploy。

firebase init尝试为您生成一个通用的 index.html 文件，如果它这样做了，那么您首先必须flutter build web生成您需要的 index.html，而不是生成通用的，然后再生成flutter deploy

score 0 · Accepted Answer

在将文件部署到 firebase 服务器之前，您应该将文件添加到公共目录文件夹（您的应用程序的索引文件应该在那里）。

score 0 · Accepted Answer

请按照步骤

npm install -g firebase-tools

如果您已经有 dist 文件夹，请将其从目录中删除

firebase login
ng build --prod
firebase init
firebase deploy

score 0 · Accepted Answer

index.html 文件具有该 firebase 默认信息。这就是它显示该信息的原因。从原始 Angular 文件中复制并粘贴 index.html 并将其粘贴到 dist index.html。这解决了我的问题。

score 0 · Accepted Answer

将公共文件夹中的默认 HTML 页面名称更改为 index.html 对我有用。此外，请确保当 firebase 在 firebase 初始化步骤中提示您时不要重写 index.html（按照所附图像）。

score 0 · Accepted Answer

我的解决方案只是稍等片刻。然后，如果它仍然无法正常工作。让我们试试：

解决方案 1：检查“build”文件夹中的 index.html 和您自己项目中的 index.html。它们应该是相同的，如果不是，请将代码 index.html 复制到“build”文件夹之外，然后粘贴到 index.html 中的“build”文件夹中。

解决方案 2：删除您的 .firebase 文件夹。并再次初始化。=>火力初始化？你想用什么作为你的公共目录？build < == 注意：“build”是我的目录？配置为单页应用（将所有 url 重写为 /index.html）？否 <== 选择否？文件 build/404.html 已经存在。覆盖？否 <== 选择否？文件 build/index.html 已经存在。覆盖？否 <== 选择否

做完这些事情后，我也收到了“Welcome Firebase Setting Host Complete”的通知，我就等一会儿。然后重新加载网站。

html - Firebase 没有运行 index.html 文件

23 回答 23

Firebase CLI 是如何工作的？

新项目

现有项目

Related

Reference