Nuxt 3部署Firestore Hosting后API请求404问题求助

一、API 404问题的核心原因 #

Firebase Hosting是静态文件托管服务，你项目里的server/api属于Nuxt的服务端路由（Node.js后端代码），yarn generate只会生成前端静态资源，不会打包或部署服务端代码，所以部署到Hosting后，/api路径没有对应的服务处理，自然返回404。

二、针对API服务的部署方案 #

需要把Nuxt的服务端API部署到Firebase Functions，配合Hosting做路径转发，步骤如下：

1. 配置Nuxt输出模式 #

修改nuxt.config.ts，指定Firebase预设及服务端代码输出路径：

export default defineNuxtConfig({
  nitro: {
    preset: 'firebase',
    output: {
      serverDir: './functions/.nuxt',
    },
  },
})

2. 初始化Firebase Functions #

如果未初始化过Functions，执行以下命令，选择Node.js作为运行环境：

firebase init functions

3. 构建并部署完整项目 #

先构建Nuxt项目（同时生成前端静态资源和服务端代码）：

NODE_OPTIONS="--max-old-space-size=4096" yarn build

再同时部署Functions和Hosting：

firebase deploy --only functions,hosting

4. 配置Hosting路径转发 #

修改firebase.json，将/api路径转发到Firebase Functions：

{
  "hosting": {
    "public": ".output/public",
    "rewrites": [
      {
        "source": "/api/**",
        "function": "server"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "functions": {
    "source": "functions"
  }
}

三、解决yarn start数据异常问题 #

仅yarn dev能拿到正确数据，大概率是环境变量或数据加载逻辑的环境差异：

• 检查生产环境的环境变量配置（如.env.production），确认数据库连接、第三方API密钥等参数是否正确注入。
• 排查服务端代码中是否存在仅dev模式生效的逻辑，比如硬编码测试数据、错误的process.env.NODE_ENV条件判断。
• 查看yarn start时的服务端日志，通过本地控制台或firebase functions:log（部署后）定位数据查询失败的具体原因。

四、验证步骤 #

1. 本地测试：执行yarn build后运行yarn start，确认/api请求返回正确数据。
2. 部署后测试：访问Firebase Hosting域名，验证/api接口返回200状态码及预期数据集。

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