问在Nuxt 3中使用Firebase函数

EN

不幸的是，您所遵循的过程有一些要点需要强调。正如前面在本线程上提到的那样

Vue.js应用程序是一个前端组件(即使它是托管在云服务中的，比如Firebase托管)。云功能是无服务器的后端组件，托管在Firebase (Google )基础结构中，并对事件做出反应。 要使这两个组件相互交互，基本上有两种可能性：

• 对于可调用的云函数和HTTPS云函数，您将从您的Vue.js应用程序中调用它们。
• 对于后台触发的云函数(例如，由文档创建之类的修复事件触发)，Vue.js前端可以生成事件(例如，写入修复)和/或侦听云函数执行的结果(例如，修改Firestore)。

…

正如文档中所解释的那样，要从Vue.js应用程序调用可调用函数，您需要执行以下操作(使用JS v9)： 添加Firebase到您的Vue.js应用程序。例如，通过一个firebaseConfig.js文件： 从“firebase/app”导入{ initializeApp }；从“firebase/firestore”导入{ getFirestore }；从“firebase/functions”导入{ getFunctions }；const firebaseConfig ={ apiKey：“.”，/.}；const firebaseApp = initializeApp(firebaseConfig)；const db = getFirestore(firebaseApp)；const函数= getFunctions(firebaseApp)；导出{ db，const }； 然后，在组件中执行<script> import { functions } from '../firebaseConfig'; import { httpsCallable } from 'firebase/functions'; // ... methods: { async callFunction() { const addMessage = httpsCallable(functions, 'addMessage'); const result = await addMessage({ text: messageText }) const data = result.data; //... }); } </script>

我还试图重现这个问题，并且我成功地用问题中的相同方法在模拟器上部署了函数，遵循GCP关于如何添加你的项目的防火墙的文档，并使用这个Youtube教程作为指南，它提供了一些关于如何向NuxtJS项目添加Firebase的重要技巧。

我将留下一个示例，说明当所有设置完成后，我的firebase.json文件是如何结束的：

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": ".output/server" 
  },
  "hosting": {
    "site": "<your_project_id>",
      "public": ".output/public",
      "cleanUrls": true,
      "rewrites": [{ "source": "**", "function": "server" }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

此外，我建议使用火基CLI，因为它具有更多的可访问性特性，并检查这个介质导轨，以便更深入地了解如何向Nuxt添加Firebase。