Firebase部署后CSS与JS资源无法加载，寻求解决方案

• 核对firebase.json配置
  重点检查hosting字段下的public路径是否指向你的静态资源根目录，比如资源都在public文件夹里，配置应类似：

  {
    "hosting": {
      "public": "public",
      // 其他配置项...
    }
  }
  

  同时排查是否存在错误的rewrites规则，比如"source": "**", "destination": "/index.html"这类配置会把所有请求导向index.html，导致CSS/JS资源请求返回HTML文件，引发加载失败。

• 验证本地与部署文件一致性
  执行firebase deploy --only hosting --debug重新部署，查看日志里的文件上传记录，确认所有CSS/JS资源都被正常上传。也可通过Firebase控制台的「Hosting -> 部署历史」下载对应版本的文件包，和本地项目对比，排查是否有资源缺失或路径不一致。

• 检查资源引用路径
  确认HTML中的资源引用路径是否正确：

  • 相对路径（如./css/style.css）要匹配HTML文件与资源的层级关系，比如index.html在根目录时，css文件夹也需在根目录。
  • 绝对路径（如/css/style.css）要确保public目录下存在对应的文件夹和文件。
  • 注意大小写问题：Firebase Hosting区分文件名大小写，而本地系统（如Windows）不区分，可能出现本地正常但部署后资源找不到的情况。

• 尝试降级Firebase CLI
  最新版本CLI可能存在兼容性问题，试降级到稳定版本，比如：

  npm install -g firebase-tools@12.5.0
  

  降级后重新部署，看问题是否解决。

• 清除缓存与CDN刷新
  用Ctrl+F5强制刷新浏览器清除本地缓存；也可在Firebase控制台的「Hosting -> 设置」中点击「清除缓存」，刷新CDN节点的缓存，避免旧的错误资源被返回。

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