Firebase电商网站重写规则问题：根路径页面访问异常

兄弟，我太懂你用Firebase搭电商网站时，想把核心页面直接挂在根路径下的需求了——毕竟干净的URL对用户和SEO都友好。你说现在index.html和retailer.html能正常访问，但有两个没明确的问题？结合我自己踩过的坑，大概率是下面这两种情况，给你逐个拆解解决：

问题1：Dashboard页面直接访问报404 #

这大概率是你的firebase.json重写规则里漏掉了dashboard的配置。Firebase Hosting默认只会把根路径指向index.html，其他根路径的请求如果没配置rewrite，就会找不到对应的html文件。

修复方法 #

打开你的firebase.json，在rewrites数组里添加dashboard对应的规则，注意具体路径的规则要放在兜底规则前面，不然会被兜底规则覆盖：

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/",
        "destination": "/index.html"
      },
      {
        "source": "/retailer",
        "destination": "/retailer.html"
      },
      {
        "source": "/dashboard",
        "destination": "/dashboard.html"
      },
      // 兜底规则（如果是SPA应用保留，静态页面可以根据需求调整）
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

配置完别忘了重新部署：firebase deploy --only hosting

问题2：Dashboard页面刷新/直接输入URL报404 #

如果你的dashboard是SPA（比如用React、Vue这类框架开发的单页应用），即使加了上面的rewrite规则，刷新或直接输入www.example.com/dashboard还是会404？这是因为Firebase Hosting会优先尝试找对应路径的物理文件，而SPA的路由是前端处理的，没有实际的/dashboard目录或文件。

修复方法 #

如果是SPA场景，你需要调整rewrite规则，让所有非静态资源的请求都路由到dashboard.html（如果dashboard是独立的SPA），或者统一路由到对应的入口文件。比如：

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/",
        "destination": "/index.html"
      },
      {
        "source": "/retailer",
        "destination": "/retailer.html"
      },
      // 匹配dashboard的所有子路由（如果有的话）
      {
        "source": "/dashboard/**",
        "destination": "/dashboard.html"
      },
      {
        "source": "/dashboard",
        "destination": "/dashboard.html"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

另外还要检查：

• 你的public目录里确实存在dashboard.html，文件名大小写要和规则里的一致（Firebase Hosting区分大小写）
• 如果是静态HTML页面，确保没有在页面里用相对路径引用资源（比如CSS/JS），否则切换到根路径下的页面时，资源会加载失败

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