Solid JS 和 Firebase 托管不顯示路線

Question

我正在嘗試 Solid。 我在 firebase 上托管了一個簡單的 web 應用程序，它顯示了 index.html 文件，但只顯示其他路由的 404 錯誤。 Solid JS 將其 index.html 文件夾與其他文件一起存儲在 dist/public 中。

404.html             favicon.ico          manifest.json        ssr-manifest.json
assets/              index.html           route-manifest.json

路由在我的開發服務器上工作正常，但在 firebase 或 .netlify 上不行。 看起來 firebase 和 .netlify 都有允許您指定重定向的配置選項，但是我要重定向到哪個 html 文件？

Answer 1

如果您在 Firebase 或 Netlify 上托管您的 web 應用程序並且您正在使用 solid-js 庫進行路由，則可能需要進行一些額外的配置更改才能使路由正常工作。 這是您需要做的：

1. 在 Firebase 上：

• 將重寫規則添加到您的 firebase.json 文件。 此規則將捕獲所有請求並將它們重定向到 index.html 文件。 這是必要的，因為 Firebase 的托管服務不支持 HTML5 歷史推送狀態，這是 solid-js 用於客戶端路由的。

• 以下是您可以使用的重寫規則示例：

  “重寫”：[{“來源”：“**”，“目的地”：“/index.html”}]

2. 在 Netlify 上：

• 將 _redirects 文件添加到項目的根目錄。

• 在 _redirects 文件中指定要重定向到特定 HTML 文件的路由。

• 這是您可以使用的示例 _redirects 文件：

  /* /index.html 200

這會將所有路由重定向到 index.html 文件，這應該可以修復您遇到的 404 錯誤。

Answer 2

如果您在 Firebase 上托管您的 Solid JS 應用程序並且只有根路由(/)在工作，但其他路由顯示404錯誤，這可能是因為 Firebase 沒有正確處理您應用程序中的客戶端路由。

解決此問題的一種方法是使用firebase.json配置文件指定重寫規則，將所有路由重定向到index.html文件。 這將允許 Firebase 處理您應用程序中的客戶端路由。

以下是如何在firebase.json文件中進行設置的示例：

{
  "hosting": {
    "public": "dist/public",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

此重寫規則告訴 Firebase 將所有路由重定向到index.html文件，然后該文件將處理您應用程序的路由。

您還可以通過在應用程序的構建目錄中指定_redirects文件，將此方法與 Netlify 結合使用。 _redirects文件應包含類似於上述規則的規則：

** /index.html 200

這會將所有路由重定向到index.html文件，該文件將處理您應用程序的客戶端路由。

Answer 3

如果你運行firebase init ，你的項目應該有一個 firebase.json。 在 json 的主機 object 里面確保有一個

"rewrites": [
    {
        "source": "**",
        "destination: "/index.html"
    }
]