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"
    }
]