如何处理 Firebase 托管中的动态链接？

Question

我使用 Firebase 托管来托管我的网站。最近我实现了一个证明概念网站，通常只使用 index.html 和 style.js。

功能信息： 用于托管整个小型网站的单个 HTML+JS 文件。我可以使用 javascript 请求修改 html 正文内容。但问题在于浏览器中的重新加载按钮。例如，如果我单击关于菜单按钮，那么 JS 函数将从后端获取关于的数据并显示。显示 url 将是https://some.domain/about。

现在如果我刷新页面，

1. 默认进入404页面。
2. 我在firebase.json 中使用了以下重定向。但结果是 https://some.domain 而不是 https://some.domain/about 具有正确的内容页面，例如按下 about 按钮时显示的内容。

代码：

1. history.pushState(null, null,/about); 手动更改 URL

2. 重定向firebase.json

   “重定向”：[{ “来源”：“/关于”， “目的地”： ”/”， “类型”：301 }]

我想保留动态功能，同时我想在地址栏中保留特定 url 以及该特定 url 的内容。

我怎样才能完成它？

Answer 1

使用rewrites:

当浏览器尝试打开指定的源 URL 时，它会在目标 URL 处获得文件的内容。

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