firebase.json忽略规则与cache-control配置失效问题求助

开发者阿泽

2026-5-27

我来帮你搞定这两个Firebase Hosting的问题，一步步拆解：

问题1：部署文件数量远超预期，找不到文件来源

首先，咱们得先搞清楚到底哪些文件被传上去了，以及为啥会被传：

查看已部署的文件清单：打开终端运行 firebase hosting:list，这个命令会列出当前Hosting上的所有文件路径，一眼就能看到哪些不该传的文件混进去了。
模拟部署排查上传范围：用 firebase deploy --only hosting --dry-run 做个“预演”，它会输出即将上传的文件列表，但不会真的部署。通过这个列表你能精准定位到哪些文件不符合预期，找到它们的来源。
修正public和ignore配置：
- 你把public设为"/"（根目录），这就等于让Firebase把根目录下所有文件都尝试上传，除非被ignore排除。这种配置很容易误传无关文件，建议改成具体的构建目录（比如"/dist"），只传需要的产物，从根源减少问题。
- 核对ignore规则：
  - "**/.*"能忽略子目录里的隐藏文件，但根目录下的隐藏文件（比如.gitignore、.env）如果没单独加进ignore，会被上传。可以加上".*"来覆盖根目录的隐藏文件。
  - 你写的"/ts/**"这类绝对路径，因为当前public是根目录，所以是有效的，但如果以后改了public路径，记得把这些规则改成相对路径。

问题2：Cache-Control缓存设置不生效

你的缓存没生效，主要是两个坑踩中了，我帮你修正：

Rewrite规则拦截了静态文件请求：
你现在的rewrites是"source": "**"，意思是所有请求都跳转到index.html——包括你要设置缓存的dist/**和public/**下的静态文件！这样浏览器请求静态文件时，实际拿到的是index.html，缓存规则当然不会生效。
解决办法：调整rewrites规则，排除静态文件路径，让它们能被正常访问：
```
"rewrites": [
  {
    "source": "!**/*.{js,css,html,png,jpg,gif,svg}",
    "destination": "/index.html"
  }
]
```
这个规则的意思是：只要请求不是这些后缀的静态文件，才跳转到index.html，完美适配单页应用的路由需求，同时不影响静态资源访问。
Headers配置的小问题：
1. Source路径写多了："*/dist/**"里的*/是多余的，Firebase的source是相对于public目录的路径，直接写"dist/**"就能匹配该目录下所有文件。
2. Cache-Control指令要合并：不用拆成三个cache-control对象，把所有指令合并到同一个value里就行，避免重复key导致的覆盖问题。

修正后的headers配置应该是这样：

"headers": [
  {
    "source": "dist/**",
    "headers": [
      {
        "key": "cache-control",
        "value": "public, max-age=0, must-revalidate"
      }
    ]
  },
  {
    "source": "public/**",
    "headers": [
      {
        "key": "cache-control",
        "value": "public, max-age=0, must-revalidate"
      }
    ]
  }
]

验证缓存是否生效：部署后，打开浏览器开发者工具的「Network」标签，刷新页面，找到静态文件的请求，查看「Response Headers」里的cache-control字段，确认是不是你设置的值就好。

最后给你一份完整的修正版firebase.json，直接用就行：

{
  "hosting": {
    "public": "/",
    "ignore": [
      "firebase.json",
      "**/.*",
      "./*",
      "**/node_modules/**",
      "/ts/**",
      "/js/**",
      "/config/**",
      "package.json",
      "package-lock.json",
      "README.MD"
    ],
    "rewrites": [
      {
        "source": "!**/*.{js,css,html,png,jpg,gif,svg}",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "dist/**",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      },
      {
        "source": "public/**",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      }
    ]
  }
}

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