Vue.js项目无法连接Firebase Realtime Database问题求助

第一步：解决依赖安装报错 #

你遇到的firebase依赖找不到、chokidar EBUSY报错按以下顺序处理：

• 终止当前运行的Vue开发服务、所有占用项目目录的程序（如文件资源管理器、编辑器插件）
• 执行命令清除npm缓存：
  npm cache clean --force
• 重新安装Firebase依赖：
  npm install firebase

第二步：修正Firebase API调用方式 #

你当前使用的是Firebase 9+模块化版本，已经废弃了app.database()、全量导入firebase的旧版API，需要按以下方式修改初始化代码：

import { initializeApp } from "firebase/app";
// 导入实时数据库专属初始化方法
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  apiKey: "AIzaSyDDQLlluO4FusOQ8ucJvD_svdMJE5dkOlw",
  authDomain: "portfolio-4dd8c.firebaseapp.com",
  databaseURL: "https://portfolio-4dd8c-default-rtdb.europe-west1.firebasedatabase.app",
  projectId: "portfolio-4dd8c",
  storageBucket: "portfolio-4dd8c.appspot.com",
  messagingSenderId: "237808071168",
  appId: "1:237808071168:web:006dc98a6c3272fbd39ee5"
};
 
// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
// 初始化实时数据库实例
const db = getDatabase(app);

// 导出数据库实例供Vue全局/组件调用
export default db;

第三步：组件内读写数据示例 #

在需要操作数据库的Vue组件中，导入对应功能方法即可使用，示例代码如下：

// 替换为你的Firebase初始化文件的实际路径
import db from './firebase.js'
// 导入数据操作需要的方法
import { ref, get, set } from 'firebase/database'

// 读取数据示例
const getDbData = async () => {
  const targetRef = ref(db, '要读取的节点路径')
  const snapshot = await get(targetRef)
  if (snapshot.exists()) {
    console.log('读取到的数据：', snapshot.val())
  }
}

// 写入数据示例
const writeDbData = async () => {
  const targetRef = ref(db, '要写入的节点路径')
  await set(targetRef, {
    testKey: '测试内容'
  })
}

注意：请删除所有import firebase from 'firebase'、app.database()这类旧版API写法，避免重复报错。

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