VueFire

外观

部署 ​

鉴于完全配置 Firebase 项目所需的步骤数量，您可以直接使用这些模板

Spark 计划 ​

Spark 计划是一个免费计划，它支持大多数 Firebase 服务。使用此计划，您需要 **预渲染您的应用程序并将其作为静态网站部署**。为此，请确保在捆绑应用程序时 **不要应用 Firebase 预设**，并使用 generate 命令

sh
nuxt generate

然后，您可以让您的 CI 将您的应用程序部署到 Firebase，或者手动进行部署

sh
firebase deploy

请注意，这需要在您的 nuxt.config.ts 中设置 ssr: true，但您也可以使用 ssr: false 并将您的 Nuxt 应用程序作为单页应用程序部署到 Firebase 托管。在这种情况下，您应该运行 nuxt build 而不是 nuxt generate，因为后者需要 SSR。

Blaze 计划 ​

警告

Firebase 预设仍处于实验阶段。不建议在生产环境中使用它。

Blaze 计划是一种按使用付费的计划，允许您运行 Firebase 函数。**它在一定数量的请求内是免费的**。使用此计划，您可以执行与 Spark 计划 相同的操作（更便宜），或者使用 Firebase 预设构建并将您的应用程序作为无服务器函数部署

sh
NITRO_PRESET=firebase nuxt build

或者，您可以在您的 nuxt.config.ts 中使用 nitro.preset 选项，该选项仅在构建期间应用。

ts
export default defineNuxtConfig({
  nitro: {
    preset: 'firebase',
  },
  // ...
})

路由规则 ​

除了预渲染任何路由之外，您还可以使用 routeRules 选项 来应用任何标头，例如缓存选项、重定向甚至静态渲染。

建议 **不要** 对应用程序中的每个路由进行 SSR。相反，您应该只对对 SEO 和性能至关重要的路由进行 SSR 或 SSG（在构建时生成）。例如，您可以对主页和产品页面进行 SSG，但不要对购物车页面或管理仪表板进行 SSG。以下是一个 routeRules 配置的示例

ts
// nuxt.config.ts
defineNuxtConfig({
  routeRules: {
    // Homepage pre-rendered at build time
    '/': { prerender: true },
    // Product page generated on-demand, revalidates in background
    '/products/**': { swr: true },
    // Blog post generated on-demand once until next deploy
    '/blog/**': { isr: true },
    // Admin dashboard renders only on client-side
    '/admin/**': { ssr: false },
  },
  // ...
})

自定义 Nitro 预设 ​

要自定义 Firebase 函数配置，建议创建您自己的 nitro 预设，而不是使用 firebase 预设。

创建一个包含两个文件的 preset 文件夹

ts
import '#internal/nitro/virtual/polyfill'
import { onRequest } from 'firebase-functions/v2/https'

const nitroApp = useNitroApp()
const config = useRuntimeConfig()

// you might need to name this function differently
// if you have other functions deployed
export const server = onRequest(
  {
    // You can set the region and other options here
  },
  toNodeListener(nitroApp.h3App)
)
ts
import { fileURLToPath } from 'node:url'
import type { NitroPreset } from 'nitropack'

export default {
  extends: 'firebase',
  entry: fileURLToPath(new URL('./entry.ts', import.meta.url)),
} satisfies NitroPreset

然后在您的 nuxt.config.ts 中设置 nitro.preset，这将仅在构建过程中使用

ts
export default defineNuxtConfig({
  nitro: {
    preset: './preset',
  },
  // ...
})

确保您的 nuxt.config.ts 文件中 **没有** 设置 nitro.preset 选项。