firebase-module Firebase Emulator 本地开发提效一行配置连接 Auth、Firestore 模拟器的完整教程【免费下载链接】firebase-module Easily integrate Firebase into your Nuxt project. 项目地址: https://gitcode.com/gh_mirrors/fi/firebase-module如果你正在用 Nuxt 开发 Firebase 项目firebase-module是最省心的接入方式而搭配Firebase Emulator本地模拟器则能让你在完全免费、零风险的环境里调试登录、读写数据。本教程带你完成从启动模拟器到一行emulatorPort配置连接 Auth、Firestore 模拟器的完整流程几分钟即可告别“开发期直连生产环境”的烦恼。为什么本地开发要连 Firebase Emulator直接连生产环境开发有几个经典痛点⚠️数据污染调试时创建的测试账号、写入的脏数据都会留在正式项目里配额消耗每次注册、每次读写都在消耗正式项目的免费额度规则风险本地验证安全规则时误操作可能影响线上数据Firebase Emulator Suite 在本地模拟了 Auth、Firestore、Storage 等服务的完整行为包括安全规则检查配合 firebase-module 的emulatorPort选项一行配置即可把 Nuxt 应用指过去。第一步安装 firebase-tools 并启动模拟器全局安装 Firebase 命令行工具需先安装 Node.jsnpm i -g firebase-tools登录后启动模拟器套件firebase login firebase emulators:start端口统一在firebase.json中声明。参考 packages/demo/firebase.json一次为五个服务声明了端口emulators: { auth: { port: 9099 }, firestore: { port: 8080 }, database: { port: 9000 }, functions: { port: 12345 }, storage: { port: 9199 }, ui: { enabled: true } } 加上ui: { enabled: true }后浏览器打开http://localhost:4000就能看到模拟器控制台随时查看登录请求和写入的数据。第二步nuxt.config 中一行配置连接模拟器firebase-module 为每个服务都提供了emulatorPort选项内部会自动调用useEmulator()完成指向切换。在 nuxt.config.ts 中配置如下firebase: { services: { auth: { ssr: true, emulatorPort: 9099 // 指向 Auth 模拟器 }, firestore: { enablePersistence: true, emulatorPort: 8080 // 指向 Firestore 模拟器 } } }配置完成后业务代码一行都不用改——依然是熟悉的this.$fire.auth.signInWithEmailAndPassword(...)和this.$fire.firestore.collection(users)只是底层请求全部落到本地模拟器。各服务模拟器端口速查表Firebase 服务配置项默认模拟器端口Auth 身份认证emulatorPort: 90999099FirestoreemulatorPort: 80808080Realtime DatabaseemulatorPort: 90009000Cloud FunctionsemulatorPort: 1234512345Cloud StorageemulatorPort: 91999199完整写法可参考 packages/demo/nuxt.config.ts。进阶让生产环境自动跳过模拟器最推荐的写法是用NODE_ENV判断开发时连模拟器、生产时自动切回正式环境防止误上线firestore: { emulatorPort: process.env.NODE_ENV development ? 8080 : undefined }两个常用辅助选项emulatorHost默认http://localhost。当模拟器跑在远程开发机或 Docker 里时改成对应主机即可disableEmulatorWarnings: true隐藏 Auth 模拟器在浏览器控制台打印的黄色提示条让调试界面更干净常见问题排查问题解决办法页面报auth/unavailable或连接超时确保先启动firebase emulators:start再刷新页面或重启 dev server生产构建后仍指向模拟器检查是否漏加NODE_ENV判断模拟器端口应只在 development 下生效控制台提示条太干扰在auth服务下设置disableEmulatorWarnings: true需要连接远程模拟器用emulatorHost指定主机如远程开发机或容器主机名Nuxt 3 项目想用该模块面向 Nuxt 2 编写Nuxt 3 请使用官方推荐的其它 Firebase 接入方案相关文档与源码位置想深入了解每个选项的细节建议从这几个入口入手Auth 模拟器选项含emulatorPort、emulatorHost、disableEmulatorWarningspackages/docs/docs/service-options/auth.mdFirestore 模拟器选项packages/docs/docs/service-options/firestore.md完整可运行的示例工程含firebase.json与模拟器配置packages/demo/模块全局配置项说明packages/docs/docs/guide/options.md✅ 现在就试试先启动模拟器再在nuxt.config里加上一行emulatorPort你的 Auth 登录和 Firestore 读写马上跑在本地——开发更快、数据更干净上线前零风险。【免费下载链接】firebase-module Easily integrate Firebase into your Nuxt project. 项目地址: https://gitcode.com/gh_mirrors/fi/firebase-module创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考