如何在Vue项目中集成FCM（Firebase Cloud Messaging）通知？

我之前在Vue+Webpack项目里集成FCM踩过不少坑，给你整理一套亲测有效的步骤，应该能帮你搞定：

1. 先装Firebase依赖 #

在项目根目录执行命令安装官方SDK：

npm install firebase

2. 准备Firebase项目配置 #

去Firebase控制台打开你的项目，进入项目设置 → 应用板块，添加Web应用后，复制生成的配置对象（包含apiKey、authDomain等字段的那个），后面要用到。另外别忘了在云消息传递设置里生成并复制你的VAPID密钥，这个是获取推送令牌必需的。

3. 写FCM初始化工具文件 #

在src目录下新建firebase.js，把初始化和核心功能封装好：

import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from "firebase/messaging";

// 替换成你自己的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化Firebase实例
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// 请求通知权限并获取设备推送令牌
export const requestForToken = async () => {
  try {
    const permission = await Notification.requestPermission();
    if (permission === "granted") {
      const token = await getToken(messaging, { 
        vapidKey: "YOUR_VAPID_KEY" // 这里填你复制的VAPID密钥
      });
      console.log("FCM设备令牌:", token);
      // 拿到令牌后可以传给后端存起来，方便后续给用户推送
      return token;
    }
  } catch (error) {
    console.error("获取令牌失败:", error);
  }
};

// 监听前台收到的推送消息
export const onMessageListener = () =>
  new Promise((resolve) => {
    onMessage(messaging, (payload) => {
      resolve(payload);
    });
  });

4. 在Vue组件里调用功能 #

比如在App.vue里集成，确保页面加载时就请求权限：

<template>
  <div id="app">
    <!-- 你的业务组件内容 -->
  </div>
</template>

<script>
import { requestForToken, onMessageListener } from './firebase';

export default {
  async mounted() {
    // 页面加载后请求通知权限并获取令牌
    await requestForToken();
    
    // 监听前台推送消息，自定义展示逻辑
    onMessageListener().then(payload => {
      console.log("前台收到推送:", payload);
      // 这里可以用UI组件（比如Element Plus的弹窗）展示消息内容
      alert(`新通知：${payload.notification.title}\n${payload.notification.body}`);
    });
  }
}
</script>

5. 配置Service Worker（重中之重！） #

FCM处理后台/离线消息必须依赖Service Worker，这也是很多人踩坑的地方：

• 在项目的public目录下新建firebase-messaging-sw.js（注意路径必须是根目录，否则FCM找不到）：

importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');

// 同样填入你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 处理后台收到的推送消息，弹出系统通知
messaging.onBackgroundMessage(function(payload) {
  console.log("后台收到推送:", payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/your-notification-icon.png' // 替换成你的通知图标路径
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

• 如果你用的是Vue CLI（底层基于Webpack），public目录下的文件会自动被复制到打包后的根目录，不用额外配置；如果是自定义Webpack配置，要确保这个文件通过copy-webpack-plugin被复制到输出目录。

6. 测试推送功能 #

去Firebase控制台的云消息传递板块，创建一条测试消息，选择你的Web应用作为目标，发送后：

• 应用在前台时，会触发onMessageListener的逻辑
• 应用在后台/关闭时，Service Worker会弹出系统级通知

常见坑点排查 #

• 权限请求没弹出：确保浏览器允许通知，本地开发用localhost是可以的（Chrome对localhost豁免HTTPS要求），线上必须用HTTPS
• 令牌获取失败：检查VAPID密钥和Firebase配置是否填错，SDK版本是否统一
• 后台消息不显示：确认Service Worker文件路径正确，且引入的Firebase SDK版本和项目里安装的版本一致

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