如何在 Firebase 中删除 .html URL 结尾并配置重定向？答案

【问题标题】：How to remove .html URL endings and configure redirects in Firebase?如何在 Firebase 中删除 .html URL 结尾并配置重定向？
【发布时间】：2020-10-04 10:11:49
【问题描述】：

编辑：修复了我在 HTML 中将 about.html 称为 /about/ 的错误，但我仍然遇到同样的问题。

我了解这是与之前多次提出的问题的重复，但其他人的解决方案对我不起作用。我要做的是重新路由，例如，index.html 到 /index/ 和 about.html 到 /about/。

我尝试使用@louisvno 的答案here、@michael-bleigh 的答案here 和@HarsH 的答案here，所有这些都将以下内容添加到.json 文件中：

"hosting": {
    "cleanUrls": true
  }

（这也是 Firebase 配置托管行为指南中“Control .html extensions”部分的答案。）

但是，这没有任何效果。在我的 HTML 文件中，我尝试将 <a> 标签设置为 href="index.html、href="/index/ 和 href="/index"，但这些选项都不起作用，我不确定是否将其从原始 <a href="index.html"> 更改为甚至是必要的。（是吗？）

我尝试的另一个解决方案是使用"redirects" 属性，正如@ken-mueller here 所建议的那样。我删除了“clearUrls”位并将以下内容放入我的 .json 文件中：

  "hosting": {
    "redirects": [ {
      "source": "index.html",
      "destination": "/index",
      "type": 301
    }, {
      "source": "index.html{,/**}",
      "destination": "/index",
      "type": 3011
    }, {
      "source": "about.html",
      "destination": "/calculator",
      "type": 301
    }, {
      "source": "about.html{,/**}",
      "destination": "/solutions",
      "type": 301
    } ]
  }

（这也是 Firebase 的 Configure redirects section 配置托管行为指南中的答案）

这也没有效果。而且，即使将我的 HTML 从<a href="about.html"> 更改为<a href="/about/"> 或<a href="/about">，它也只是破坏了about.html 页面并改为显示index.html 页面。

我做错了什么？如何从 URL 末尾删除 .html 并确保在任何时候在 URL 中输入它时，它都会重定向到没有结尾的 URL（即 /index/ 而不是 /index.html？

【问题讨论】：

在 firebase.json 文件中设置 "cleanUrls": true 允许您将 .html 保留在文件之外，因此 /index.html 变为 /index（没有尾随 /）。如果这对您不起作用，您能否将我们指向您配置它的 URL？
感谢您的回复！我在 carbonfootprint.dev 上托管这个。由于某种原因仍然无法正常工作。
干净的 URL 对我有用，例如：carbonfootprint.dev/calculator。但是从阅读文档看来，托管也应该将https://carbonfootprint.dev/calculator.html 自动重写为https://carbonfootprint.dev/calculator，这似乎没有发生。您可能需要reach out to Firebase support 以获得个性化的故障排除帮助。
干净的 URL 实际上链接到错误的页面，/calculator 应该链接到 calculator.html，但由于某种原因它显示了索引。这意味着什么？
嗯...听起来你有一个 rewrite 覆盖干净的 URL 重定向。我实际上不确定这些标志的组合应该如何工作。

标签： firebase url redirect firebase-hosting

【解决方案1】：

感谢 Firebase 支持的 Mau，最终解决了这个问题。 "cleanUrls" 工作正常，我只需要一个开始和结束括号（duh）。对于我帖子中的代码，我还注意到其中一个重定向将"type": 设置为3011 而不是301。不管怎样，最终的代码是：

{
  "hosting": {
    "cleanUrls": true,
    "trailingSlash": true
  }
}

【讨论】：