Firebase CLI：“配置为单页应用（将所有 url 重写为 /index.html）”答案

【问题标题】：Firebase CLI: "Configure as a single-page app (rewrite all urls to /index.html)"Firebase CLI：“配置为单页应用（将所有 url 重写为 /index.html）”
【发布时间】：2016-10-06 15:55:00
【问题描述】：

我刚刚使用 Firebase CLI 启动了一个静态托管项目。当您启用“配置为单页应用程序”选项时，究竟会发生什么？我正在寻找关于修改了哪些文件的描述，以及这对 Firebase 后端有什么影响。

【问题讨论】：

我不熟悉该选项。你能说明在哪里启用它/在哪里记录？
@FrankvanPuffelen 查看我添加到问题中的屏幕截图

标签： firebase firebase-hosting firebase-tools

【解决方案1】：

该选项只是在 firebase.json 文件中设置一个标志，以将所有 URL 重定向到 /index.html。

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

有关更多信息，请参阅documentation of Firebase Hosting，其中还包含这个更完整的示例：

"hosting": {
  // ...

 // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    // Serves index.html for requests to files or directories that do not exist
    "source": "**",
    "destination": "/index.html"
  }, {
    // Serves index.html for requests to both "/foo" and "/foo/**"
    // Using "/foo/**" only matches paths like "/foo/xyz", but not "/foo"
    "source": "/foo{,/**}",
    "destination": "/index.html"
  }, {
    // Excludes specified pathways from rewrites
    "source": "!/@(js|css)/**",
    "destination": "/index.html"
  } ]
}

【讨论】：

有了这个配置localhost:5000/qqq 渲染但不是localhost:5000/qqq/www 我该如何解决这个问题？第二个链接不呈现 index.html
那我们怎样才能在这里也写一个API/函数呢？例如： 'somewebsite.com/api' 也将重定向到一个函数，但也有一个 root somewebsite.com 使用**
感谢举报。我从链接文档中添加了更完整的示例，以帮助降低这种风险。

【解决方案2】：

如果您将其设置为“是”，则所有无效 URL（如 www.example.com/some-invalid-url）将被重定向到您网站的 index.html，这是一件好事。您也可以将其设置为您的自定义404.html。

firebase.json

{

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

奖励：将cleanUrls 设置为true 以从您部署的网站网址中删除.html 扩展名，否则所有没有.html 的网址将重定向到index.html。

【讨论】：

【解决方案3】：

请注意：如果您想使用服务器端渲染 (SSR)，请输入 No 并设置您的 rewrites，如下所示：

"rewrites": [
  {
    "function": "angularUniversalFunction",
    "source": "**"
  }
]

毕竟，无论您选择什么，您都可以随时在 firebase.json 文件中进行更改。

【讨论】：

【解决方案4】：

Firebase 官方解释：

我们去年（第一季度和第二季度）使用了该选项，但它似乎什么也没做，但现在当我们应用它时，情况肯定会大不相同。完整的官方解释在这里：

https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites

在同一页面的下一部分中甚至还有一些关于标题使用的有用信息。

【讨论】：

【解决方案5】：

完整示例：

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

【讨论】：