如何将仅collection路由启用SSR的Nuxt 3非SSR应用部署到Firebase

针对你遇到的混合SSR/静态路由部署Firebase时的404问题，按以下步骤修正：

1. 调整firebase.json配置 #

混合模式下，SSR路由需要通过Firebase Functions处理，静态路由直接托管，必须配置路由转发规则。替换你的firebase.json为以下内容：

{
  "hosting": {
    "public": ".output/public",
    "cleanUrls": true,
    "rewrites": [
      // 让collection/**路由走SSR函数
      {
        "source": "/collection/**",
        "function": "server"
      },
      // 其余非SSR路由走SPA模式的index.html
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "functions": {
    "source": ".output/server",
    "runtime": "nodejs18" // 请匹配你的项目Node版本，建议18+
  }
}

2. 确认构建输出结构 #

执行NITRO_PRESET=firebase npm run build后，检查.output目录：

• .output/public：包含静态生成的资源、非SSR路由的HTML文件
• .output/server：包含SSR对应的Firebase函数代码
  确保Firebase Functions的source路径正确指向.output/server，否则函数无法正常部署。

3. 完整部署流程 #

不要单独部署Hosting，必须同时部署Functions和Hosting：

1. 执行构建：NITRO_PRESET=firebase npm run build
2. 部署到Firebase：firebase deploy

4. 配置自定义404页面 #

在Nuxt项目中创建pages/404.vue，构建时会自动生成404.html到.output/public，避免Firebase返回默认的404错误提示。

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