Firebase Hosting URL路径参数失效，如何配置动态内容路由？

你的核心问题出在重写规则的顺序上！Firebase Hosting的重写规则是按从上到下的顺序匹配的，你原来的第一条规则"source": "**"会匹配所有请求，导致后面的/apps/**规则完全没机会生效——所有请求都被直接导向了index.html，这不仅让apps.html接收不到请求，还会干扰CSS/JS等静态资源的正常加载。

下面是修正后的完整配置和实现步骤：

修正后的firebase.json配置 #

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 1. 优先处理静态资源：匹配带扩展名的文件，直接返回原文件
      {
        "source": "**/*.@(css|js|png|jpg|jpeg|gif|svg|ico)",
        "destination": "/$1"
      },
      // 2. 处理/apps/xxx路径的请求，导向apps.html
      {
        "source": "/apps/**",
        "destination": "/apps.html"
      },
      // 3. 最后处理其他所有请求，导向index.html
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true
  }
}

配置说明 #

• 规则顺序是关键：把更具体的规则放在前面，这样/apps/4480023会优先匹配到第二条规则，成功导向apps.html，而不会被最宽泛的**规则拦截。
• 静态资源保护规则：这条规则确保CSS、JS、图片等静态文件不会被错误重写，直接返回对应文件，解决资源加载失败的问题。你可以根据自己的需求添加更多文件扩展名。
• cleanUrls兼容：这个设置会自动去掉URL中的.html后缀，所以访问mydomain.com/apps/4480023会正确映射到apps.html，无需手动添加后缀。

在apps.html中提取资源ID #

配置生效后，你可以通过JavaScript解析URL路径获取ID：

// 获取当前URL路径，比如 "/apps/4480023"
const path = window.location.pathname;
// 分割路径为数组，得到 ["", "apps", "4480023"]
const pathSegments = path.split('/');
// 取数组最后一段就是资源ID
const resourceId = pathSegments[pathSegments.length - 1];

// 验证并使用ID
if (resourceId) {
  console.log('当前资源ID:', resourceId);
  // 这里可以编写动态内容逻辑，比如根据ID请求对应数据
}

额外注意事项 #

• 本地测试：部署前先用firebase serve命令在本地测试，确认重写规则生效、静态资源加载正常。
• 资源路径建议：如果apps.html中引用了CSS/JS，尽量使用根路径开头的绝对路径（比如/css/style.css），避免因URL路径层级导致的相对路径错误。

内容的提问来源于stack exchange，提问作者Jay