Firebase未运行index.html文件

Question

我是一位非常新的程序员，正在浏览Firebase教程。我已经完成了教程的步骤1-5（https://codelabs.developers.google.com/codelabs/firebase-web/#5）。我已经在您的网络应用中添加了＃34;添加Firebase＆＃34; js代码到html文件，并设置Firebase CLI。但是，当我运行firebase服务器时，除了没有显示index.html文件中的代码之外，一切似乎都有效。

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

Answer 1

我想出了我的答案。正在发布的index.html文件位于＆＃34; public＆＃34;文件，它是在＆＃34; firebase init＆＃34;中创建的。阶段。我用我的应用程序替换了占位符html文件。

Answer 2

问题是firebase init令人难以置信的粗暴。它只会覆盖index.html文件夹中的public文件...没有确认，没有安全网，没有任何内容。

解决此问题的唯一方法是重新生成您自己的index.html文件。 如果您没有备份或其他方式重新生成index.html文件......那么......太糟糕了！

通常，使用webpack（或其他构建工具）进行firebase设置的步骤有点像这样：

1. firebase login
2. firebase init
3. your-build-command-here
4. firebase deploy

请注意，您只需在第一次在该计算机上设置构建时执行前两个步骤（或者可能在发布新的firebase修订版时）。要重新部署，只需：

1. your-build-command-here
2. firebase deploy

<强>更新

在最新版本中，它至少会询问你是否应该覆盖：）

Answer 3

对于带有cli的角度2或6，使用.（dist）作为公共目录，

$ ng build --prod
$ cd dist/
$ firebase init
 ? What do you want to use as your public directory? .
 ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
 ? File ./index.html already exists. Overwrite? No
$ firebase deploy

Answer 4

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

享受！ ;）

Answer 5

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

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

Answer 6

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

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

Answer 7

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

firebase login

firebase init

firebase deploy

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

<块引用>

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

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

Answer 8

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

1. npm run build
2. 确保在firebase deploy之前使用它
3. 并且还会使您的目录不正确。
4. 在完成 firebase init 进程后执行此操作。

Answer 9

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

到达Firebase初始化步骤询问公共目录时，此示例的文件夹名称应为“ dist / blog-front”，或通常为“ dist / yourApplicationName”：

Answer 10

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

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

这解决了我的问题

Answer 11

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

Answer 12

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

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

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

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

Answer 13

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

Answer 14

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

然后运行以下命令：

firebase login

ng build --prod

firebase init

firebase deploy

Answer 15

这对我有用

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

Answer 16

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

Answer 17

您应先将文件添加到公共目录文件夹中，然后再将其部署到Firebase服务器中（您应用的索引文件应在其中）。

Answer 18

请按照步骤

npm install -g firebase-tools

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

firebase login
ng build --prod
firebase init
firebase deploy

Answer 19

如果您在 firebase init 之前获得一个 public 文件夹，其中 index.html 已准备好。你可以简单地用你的替换 index.html 并使用命令：

firebase deploy

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

Answer 20

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

向下滚动后选择以下内容

  Hosting: Deployed Site

Answer 21

工作解决方案

就去做 flutter build web，然后 flutter deploy。

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