Firebase 主機沒有顯示應用程序？

Question

我是 firebase 的新手，我嘗試將我的應用程序部署到 firebase。 我已遵循所有步驟。 但是，由於某種原因沒有顯示我的應用程序。 我得到了歡迎模式，而不是我的 web 應用程序。 以下是圖片：

Answer 1

部署步驟如下

步驟1：

ng build --prod

第2步：

firebase init

    *Are you ready to proceed?* Yes

    *What do you want to use as your public directory?* dist/{your-application-name}

    *Configure as a single-page app (rewrite all urls to /index.html)?(y/N)* Yes

    *File dist/{your-application-name}/index.html already exists. Overwrite?(y/N)* No

第 3 步：

firebase deploy --only hosting

如果您仍然獲得相同的頁面，只需按“CTRL + F5”，它將清除緩存。

Answer 2

這是因為當您在初始化firebase時選擇"Y"時index.html已自行修改。 它基本上已將您自己的索引文件替換為該索引文件。 檢查並替換索引文件，下次不要覆蓋 index.html 文件。 它會起作用的。

Answer 3

我遇到了同樣的問題。 就我而言，問題不在於firebase。 只是清除緩存是解決方案。

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>

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

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

第三步運行命令firebase deploy

請享用 ！ ;)

Answer 5

我跑到這個問題上

如果有人在使用 firebase init 命令后遇到同樣的情況，

檢查您的公共文件夾中的 index.html 文件（用於反應）。

它可能已被firebase覆蓋。

為了告訴 firebase 不要覆蓋您現有的 index.html 文件，

當 firebase 詢問您是否要覆蓋現有的 index.html 文件時鍵入“N”

Answer 6

如果有人因為一個

似乎某些以 web.app 結尾的域被 ISP 提供商阻止，對於某些國家/地區，我使用私人 VPN 並訪問我的網站，直到它被修復。

Answer 7

如果您看到此屏幕截圖中的內容，則說明 Firebase 生成了另一個index.html文件，它指向這個文件而不是您自己的文件。 以下是修復方法：

1. 刪除 Firebase 生成的index.html並保留您自己的。
2. 使用firebase deploy重新部署

Answer 8

對我自己來說，問題是我給了我的應用程序位置的絕對路徑， firebase init似乎只采用相對路徑。

Answer 9

由於 Angular v6 CLI 項目使多個應用程序共享代碼庫變得更加容易。 因此 dist 中的新文件夾。

引用 dotGitignore 答案：

我發現 ng build --prod 將在項目位置所在的下面創建一個 dist 和另一個子文件夾。

在此處查看如何修復它https://stackoverflow.com/a/50360478/11652243

Answer 10

唯一的解決方案是 firebase 部署文件是 index.tml 但我們需要構建文件所以替換你的

 { "hosting": { "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }

只需用這個替換你的 firebase.json 文件，你就會發現魔法

Answer 11

在某些情況下，實際上不需要任何東西。 將所有靜態文件移動到您選擇的公用文件夾中。 使用命令

firebase deploy

然后按 ctrl+f5 清除緩存。 那是為我做的。

Answer 12

在 Firebase 中部署網站時，我遇到了類似的問題。

Firebase 通常會創建兩個默認域，web.app 和 firebaseapp.com。 如果一個不起作用，請使用另一個。

這解決了我的問題。 試試看！

確保將文件上傳到 Firebase。

否則，使用firebase deploy --only hosting將文件從公共目錄部署到 firebase。

Answer 13

按照以下步驟進行常規部署。 https://alligator.io/angular/deploying-angular-app-to-firebase/

您必須檢查dist文件夾中的index.html是否由 Firebase 重新生成。

如果是這樣，您只需刪除由 Firebase 修改的 html 文件並創建一個新的index.html文件，然后使用實際上是通過$ ng build --prod創建的index.html強制更新內容。 現在輸入$ firebase deploy --only hosting 。

因此，請留意您的 index.html 文件內容及其位置。 如果它的位置不是dist文件夾。 您應該為firebase.json文件中的公共字段相應地提供適當的位置。

Answer 14

我有同樣的問題。 請按照以下步驟操作：

火力基地初始化

*Are you ready to proceed?* Yes

Make a public folder and Copy your all files into it

*What do you want to use as your public directory?*(public) -->only press enter

*Configure as a single-page app (rewrite all urls to /index.html)?(y/N)* N

*File public/index.html already exists. Overwrite?(y/N)* No

那就是您的應用程序將托管...

Answer 15

在命令 firebase init 之后，轉到 public 或 dist 文件夾並選擇除 firebase 相關文件之外的所有文件（不是文件夾）並復制到 dist 或 public 文件夾中。 在此之后執行命令 firebase deploy 並等待一段時間。 完成后轉到提到的網址，您將找到您的工作應用程序。

Answer 16

當您運行 firebase init Firebase 時，會在您的項目文件夾中創建一個文件結構，並根據您所做的選擇為您的公共文件創建一個 /public 文件夾（或其他名稱，如果您指定）。 在該 /public 文件夾中，它還會創建一個 index.html 文件，其中包含您看到的歡迎消息。 您需要獲取您的應用程序文件（網頁等）並將它們移動到該公共文件夾中並與它們一起替換該 index.html 文件。 完成此操作后，運行命令“firebase deploy”，它將更新，您應該會看到您的應用程序。

Answer 17

@arslan 的回答在這里幫助了我並為我工作，從空白網頁到能夠看到我的應用程序。

我的解決方案：我編輯了我的 firebase.json 文件，然后 npm run build，然后重新運行了我的命令 firebase emulators:start。 將文件從

 { "functions": { "source": "functions" }, "hosting": { "public": "public", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }

至...

 { "hosting": { "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }

Answer 18

在部署之前確保您的文件位於新創建的目錄中，例如 y 或公共文件夾

Answer 19

自己想出來，解決了我的問題：

1. 運行構建（npm 運行構建）

2. 手動將 firebase.json 和 .firebasesrc 文件添加到根文件夾

3. 確保 firebase.json hosting->public 設置為“build

4. 運行 firebase 部署

Answer 20

我有同樣的問題，我意識到出於某種奇怪的原因，firebase.json 不在我的倉庫中。 我使用上面示例中的配置創建了它，然后我再次進行了 firebase init，在它運行后找到了我的 firebase.json 並對其進行了修改，它可以工作

Answer 21

我遇到了同樣的問題並通過以下步驟解決：

黑客解決方案

步驟：1轉到您的構建文件夾並將 index.html 替換為您的 index.html（公共文件夾）。

步驟：2運行命令：npm run build

步驟：3選擇NO => File dist/{your-application-name}/index.html 已經存在。 覆蓋？ (是/否)否

步驟：4然后轉到鏈接並按 Ctrl+f5。 您的應用程序將在您面前。 :)

Answer 22

就我而言，在使用ng build后，我告訴 firebase 源目錄是dist ，但實際上它是dist/my-project ...

（在dist中有一個 firebase index.html。角度 index.html 在dist/my-project ...）

Answer 23

有時發生這種情況時，您需要在 CLI 上注銷firebase logout ，
然后再次firebase login 。

然后重復所有托管過程並確保在您的主要方法上初始化 Firebase Firebase.initializeApp()如果您使用的是 flutter。

這對我有用。

Answer 24

在這里我找到了問題的答案

步驟1：

首先初始化firebase。

 $firebase init

第2步：

立即創建生產版本。

 $ng build --prod

步驟：3

是時候部署您的應用程序了。

 $firebase deploy

Answer 25

對我有用的修復是使用 firebase 提供的第二個鏈接而不是第一個鏈接：

使用： your-project-id.firebaseapp.com （而不是： your-project-id.web.app ）