@expo/vector-icons在Firebase托管的Web项目中无法显示求助

问题概述 #

将React Native项目通过Expo for web部署到Firebase Hosting后，图标出现加载失败的网络/控制台错误，但本地运行时图标显示正常，已尝试相关社区方案仍未解决。

排查与解决步骤 #

1. 校验图标路径与配置 #

• 打开项目根目录的app.json（或app.config.js），确认web字段下的图标配置路径正确，示例如下：

  "web": {
    "favicon": "./assets/favicon.png",
    "icons": [
      {
        "src": "./assets/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      }
    ]
  }
  

• 确认配置中指定的图标文件确实存在于对应路径，且文件名、大小写与配置完全匹配（Linux环境下区分大小写）。

2. 修正Firebase Hosting配置 #

• 检查firebase.json的hosting节点，确保public字段指向Expo web构建产物目录（默认是web-build）：

  "hosting": {
    "public": "web-build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
  

• 如果配置了重写规则，避免静态资源被错误转发到index.html，可添加例外规则：

  "rewrites": [
    {
      "source": "!/assets/**",
      "destination": "/index.html"
    }
  ]
  

3. 重新构建并部署 #

• 清理旧构建产物：

  rm -rf web-build
  

• 重新构建web版本：

  npx expo build:web
  

• 重新部署到Firebase：

  firebase deploy --only hosting
  

4. 清除缓存 #

• 登录Firebase控制台，进入Hosting面板，点击「清除缓存」按钮刷新CDN缓存
• 在浏览器中强制刷新页面（Ctrl+Shift+R），绕过本地缓存验证结果

5. 确认资源MIME类型 #

• 若图标文件MIME类型错误，会导致浏览器无法识别，可在firebase.json中添加头部配置：

  "hosting": {
    // ...其他配置
    "headers": [
      {
        "source": "**/*.png",
        "headers": [{"key": "Content-Type", "value": "image/png"}]
      }
    ]
  }
  

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