如何在Vue.js中正确配置Firebase Cloud Messaging（FCM）？

阿华AIGC实验室

2026-5-28

Vue.js 配置 Firebase Cloud Messaging (FCM) 新手友好指南

作为过来人，完全懂你看官方文档一脸懵的感受——术语多、不说代码放哪儿，新手真的难顶。下面我把每一步拆得明明白白，连文件位置、代码作用都给你讲清楚，跟着做就行！

第一步：先搞定Firebase端的准备工作

打开Firebase控制台，创建一个新项目（如果已有项目直接用）。
点击「添加应用」，选择Web平台（就是那个</>图标），随便起个应用昵称，不用勾选「设置Firebase托管」，直接点「注册应用」。
接下来会看到一段firebaseConfig代码，复制下来存好，后面要用到。
然后去项目设置 → 云消息传递 → Web配置，点击「生成密钥对」，拿到你的vapidKey，也复制存好。

第二步：给Vue项目装依赖

打开你的Vue项目终端，安装Firebase SDK：

npm install firebase
# 或者用yarn
yarn add firebase

第三步：创建Firebase配置文件

在Vue项目的src文件夹下，新建一个firebase文件夹，里面创建firebase.js文件（路径：src/firebase/firebase.js），把下面的代码贴进去，替换成你刚才复制的firebaseConfig和vapidKey：

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

// 替换成你的Firebase配置
const firebaseConfig = {
  apiKey: "你的apiKey",
  authDomain: "你的authDomain",
  projectId: "你的projectId",
  storageBucket: "你的storageBucket",
  messagingSenderId: "你的messagingSenderId",
  appId: "你的appId"
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);

// 获取FCM实例
const messaging = getMessaging(app);

// 注册Service Worker
import { useServiceWorker } from "firebase/messaging";
useServiceWorker(messaging, navigator.serviceWorker.register('/firebase-messaging-sw.js'));

// 导出messaging和相关方法，方便组件调用
export { messaging, getToken, onMessage };

第四步：配置Service Worker（关键！很多新手卡在这里）

FCM需要Service Worker来处理后台消息，所以我们要在public文件夹下创建firebase-messaging-sw.js（路径：public/firebase-messaging-sw.js）——因为Service Worker必须放在项目的根目录下，Vue的public文件夹就是编译后的根目录。

把下面的代码贴进去，同样替换成你的firebaseConfig：

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');

// 这里用compat版本是为了兼容Service Worker的环境
firebase.initializeApp({
  apiKey: "你的apiKey",
  authDomain: "你的authDomain",
  projectId: "你的projectId",
  storageBucket: "你的storageBucket",
  messagingSenderId: "你的messagingSenderId",
  appId: "你的appId"
});

const messaging = firebase.messaging();

// 处理后台消息（用户不在当前页面时触发）
messaging.onBackgroundMessage(function(payload) {
  console.log('收到后台消息:', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png' // 可以换成你自己的通知图标，放在public文件夹里
  };

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

第五步：在Vue组件中实现通知功能

比如我们在App.vue里集成，这样打开页面就能请求通知权限、获取FCM Token：

<template>
  <div id="app">
    <h1>FCM测试页面</h1>
    <p v-if="token">你的FCM Token: {{ token }}</p>
    <p v-else>正在获取Token...</p>
  </div>
</template>

<script>
import { messaging, getToken, onMessage } from './firebase/firebase.js';

export default {
  data() {
    return {
      token: ''
    }
  },
  async mounted() {
    // 请求用户通知权限
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      // 获取FCM Token
      try {
        const currentToken = await getToken(messaging, {
          vapidKey: '你的vapidKey' // 替换成你之前生成的vapidKey
        });
        if (currentToken) {
          this.token = currentToken;
          console.log('FCM Token:', currentToken);
          // 这里可以把Token发给你的后端，用来给用户推送消息
        } else {
          console.log('没有获取到Token，请检查配置');
        }
      } catch (error) {
        console.log('获取Token失败:', error);
      }

      // 监听前台消息（用户在当前页面时触发）
      onMessage(messaging, (payload) => {
        console.log('收到前台消息:', payload);
        alert(`收到通知：${payload.notification.title}\n${payload.notification.body}`);
      });
    } else {
      console.log('用户拒绝了通知权限');
    }
  }
}
</script>