Nuxt3静态应用部署Firebase后直接访问路径出现404错误

问题1：直接访问路径触发404的解决方案 #

你遇到的404问题核心是静态Nuxt应用（SSR=false）的客户端路由在Firebase Hosting上无法被正确解析，再加上你未部署Firebase Functions却配置了rewrites指向server函数，导致路径无法匹配到正确资源。

修复步骤： #

1. 修改firebase.json的Hosting配置，将rewrites规则改为指向静态入口文件index.html，可保留cleanUrls（可选）：

{
  "hosting": {
    "site" : "<firebase-project-id>",
    "public": ".output/public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  // 可注释或删除未部署的functions配置
  // "functions": { ... }
}

2. 重新部署静态资源：

firebase deploy --only hosting

解释：静态Nuxt应用依赖客户端路由处理所有路径，Firebase Hosting默认会尝试查找对应路径的物理文件（比如/home会找home.html），不存在则返回404。通过rewrites将所有请求指向index.html，就能让Nuxt的客户端路由接管路径解析。

问题2：集成Firebase Functions启用SSR的步骤 #

要让Nuxt 3的Nitro引擎与Firebase Functions集成，需配置SSR模式并部署服务端产物：

1. 调整Nuxt配置 #

修改nuxt.config.ts，确保启用SSR（默认值为true，若之前设为ssr: false需改回）：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // 移除或显式设置 ssr: true
  // ssr: true,
  // 其他原有配置（meta/runtimeConfig/build）保留不变
})

2. 配置Firebase #

保留firebase.json中的functions和hosting配置，确保rewrites指向server函数，同时新增依赖安装的predeploy命令：

{
  "functions": {
    "source": ".output/server",
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" install",
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "hosting": {
    "site" : "<firebase-project-id>",
    "public": ".output/public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "function": "server"
      }
    ]
  },
  // 其他原有配置（database/firestore/storage）保留
}

3. 构建并部署 #

• 先构建SSR模式的Nuxt应用（会生成.output/public静态资源和.output/server服务端产物）：

npx nuxt build

• 同时部署Hosting和Functions：

firebase deploy --only hosting,functions

注意事项： #

• Firebase Functions有内存、执行时间等资源限制，可根据应用需求在firebase.json的functions节点添加runtimeOptions调整配置。
• 确保你的Firebase项目已启用Functions服务，且本地安装了firebase-tools工具。

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