Firebase部署SPA后CSS样式异常仅刷新浏览器才正常显示

算力阿峰

2026-10-7

问题修复方案

根因定位

这是SPA客户端路由与静态资源相对路径不匹配的典型问题：
你通过前端路由跳转至多级路径页面（如/61159918604c7700164465bd/players）时，CSS中用相对路径声明的背景图片会基于当前页面路径解析，而非站点根路径，导致资源加载失败；手动刷新页面时，请求先触发Firebase服务端重写规则返回根路径下的index.html，资源从根路径解析，因此背景图加载正常。

修复步骤

1. 将所有CSS、JS中声明的背景图路径统一改为根路径绝对路径，路径开头加/即可
  示例：将原写法background-image: url(./assets/team-bg.png)改为background-image: url(/assets/team-bg.png)，动态绑定的背景图路径也遵循同样规则
1. 若修改路径后仍偶现加载异常，可在firebase.json中补充静态资源缓存规则，完整配置参考如下：

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(jpg|jpeg|png|webp|gif|svg)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
}