Firebase 没有运行 index.html 文件答案

【问题标题】：Firebase not running index.html fileFirebase 没有运行 index.html 文件
【发布时间】：2016-11-23 23:22:40
【问题描述】：

我是一名正在学习 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 文件。好像我错过了一些非常简单的东西。感谢您的帮助。

【问题讨论】：

标签： html firebase firebase-hosting firebase-tools

【解决方案1】：

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

【讨论】：

【解决方案2】：

我从项目中删除了 public 文件夹（或 dist 文件夹），并删除了所有与 firebase 相关的文件。然后重新构建公用文件夹，然后

firebase init

初始化firebase，然后

firebase deploy

现在它可以正常工作了。

【讨论】：

【解决方案3】：

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

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

解决方案 2：删除您的 .firebase 文件夹。并再次初始化。 => 火力基地初始化 ?你想用什么作为你的公共目录？ build

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

【讨论】：

【解决方案4】：

新项目

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

现有项目

用

更新firebase.json

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

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

【讨论】：

非常感谢！我无法解决这个问题。我错过了cd/dist 部分......现在这个答案已经在 Angular 6 上进行了测试
不确定为什么要从 dist 文件夹中初始化 firebase。我很确定它会被每个 ng 构建所消灭。只需从父文件夹执行此操作，并在 firebase 初始化过程中将 dist 文件夹设置为公共目录
我正在使用 Angular，我必须为公共目录指定 dist/my-app-name，因为这是 Angular 在运行 ng build --prod 后放置我的 index.html 文件的位置。如果你指定 dist，你不想 cd 到 dist 文件来运行 firebase init，只需从你的主项目文件夹中运行它。
与 create react app 相同，必须使用 File ./index.html 已经存在。覆盖？不，...我做到了：（
@kat 你应该添加这个作为答案，这也为我解决了。

【解决方案5】：

工作解决方案

只要做 flutter build web，然后 flutter deploy.

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

【讨论】：

Errrr，颤振？
@TaslimOseni 我的颤振应用程序遇到了同样的问题。所以，我只是在解决问题后在这里回答。

【解决方案6】：

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

firebase login

firebase init

firebase deploy

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

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

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

【讨论】：

【解决方案7】：

如果您得到一个 public 文件夹，其中包含 firebase init 准备好的 index.html。您可以简单地将 index.html 替换为您的并使用以下命令：

firebase deploy

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

【讨论】：

【解决方案8】：

显示给您的网站是您的public 文件夹中的index.html（或任何您的configured it to be in your firebase.json file）。

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

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

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

firebase CLI 是如何工作的？

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

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

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

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

要重新部署，很简单：

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

【讨论】：

也发生在我身上，我想我必须从头开始重新创建我的项目才能生成 index.html 文件。

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

这对我有用

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

【讨论】：

【解决方案14】：

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

然后运行以下命令：

firebase login

ng build --prod

firebase init

firebase deploy

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

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

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

【讨论】：

【解决方案17】：

在我的情况下 firebase 使用了错误的目录，另请参见此处：firebase CLI didn't recognize the current project directory for 'firebase init'. 虽然我期望 firebase 将所有创建的文件放入我的项目目录，但它完全断开连接并将所有文件放入我的 /Users/MyUserName 目录并从那里部署错误的 index.html。

这是解决方法（无需按照链接帖子中的建议重新安装 firebase）：

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

顺便说一句，对于所有使用 Angular 7 的人来说，tutorial about deploying an angular 7 app to firebase hosting 对我真的很有帮助。

【讨论】：

【解决方案18】：

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

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

这解决了我的问题

【讨论】：

【解决方案19】：

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

【讨论】：

【解决方案20】：

请按步骤操作

npm install -g firebase-tools

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

firebase login
ng build --prod
firebase init
firebase deploy

【讨论】：

【解决方案21】：

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

享受吧！ ;)

【讨论】：

终于有人用 index.html 内容信息回答了这个问题，我知道我需要在代码中的某个地方设置域！
@HammadJ - 你是怎么做第 2 步的？我已经用我的 src 文件中的版本替换了我的公共 index.html - 但即使我继续重新运行 npm run build 和 firebase deploy，它似乎恢复到早期版本。我不知道在哪里放置您在第 2 步中建议的基本 href 或脚本标签。谢谢
对我来说，我需要从 { "hosting": { "public": "public"} } { "hosting": { "public": "build"} } 更改为 firebase.json，因为我使用 create-react-app 创建了我的应用程序，其 yarn run build 命令将文件放在名为 build not dist 的目录中。

【解决方案22】：

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

向下滚动后选择以下内容

  Hosting: Deployed Site

【讨论】：

【解决方案23】：

用于将 Angular 应用程序部署到 Firebase 的简单快速教程你可以找到here。

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

【讨论】：

【解决方案24】：

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

【讨论】：

如何替换这个公开的 index.html 文件？
生成一个新的
@shaiban 再次运行firebase init 并确保您不会重写index.html