Expo Web与Firebase Hosting问题：导出HTML含Meta标签但部署后缺失

可能原因及修复步骤 #

1. Firebase Hosting重写规则优先级问题 #

Firebase默认的SPA配置会把所有请求导向根目录index.html，导致Expo导出的各路由静态HTML文件未被正确命中，自然丢失对应页面的meta标签。

修复：
修改firebase.json的rewrites规则，优先匹配已存在的静态文件，再回退到SPA路由：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html",
        "condition": {
          "not": {
            "regex": "^/.*\\.html$"
          }
        }
      }
    ]
  }
}

部署时执行firebase deploy --only hosting确保规则生效。

2. Expo静态导出配置缺失 #

确认app.json中已开启静态导出支持：

{
  "expo": {
    "web": {
      "bundler": "metro",
      "output": "static",
      "staticPath": "dist"
    }
  }
}

重新执行npx expo export -p web，检查dist目录下每个路由是否生成了独立HTML文件（如/about对应about.html）。

3. Firebase缓存残留 #

旧的index.html可能被CDN缓存，导致新部署的静态页面未加载：

• 部署时添加强制刷新参数：firebase deploy --only hosting --force
• 登录Firebase控制台，在Hosting页面手动点击「清除缓存」按钮清空CDN缓存。

4. Head组件使用错误 #

确保每个路由页面单独配置专属meta标签，避免全局布局覆盖：

import { Head } from 'expo-router';

export default function AboutPage() {
  return (
    <>
      <Head>
        <title>About Page</title>
        <meta name="description" content="This is the about page" />
      </Head>
      {/* 页面内容 */}
    </>
  );
}

不要在_layout.tsx等全局组件中添加路由专属的meta标签，防止冲突或覆盖。

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