FCM 浏览器通知在 Vue 3 中不起作用

Question

这是我的代码。到目前为止，我已经设法让后台通知正常工作。 （Onmessage 不起作用）

"firebase": "^9.6.7",

firebase-messaging-sw.js

null

App.vue

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

const firebaseConfig = {
      apiKey: "AIzaSyDXnUaeAK",
      authDomain: "test-test.firebaseapp.com",
      projectId: "test-test",
      storageBucket: "test-test.appspot.com",
      messagingSenderId: "123456789",
      appId: "1:38296:web:j88054626",
      measurementId: "X-TEST"
    };
    initializeApp(firebaseConfig);
    const messaging = getMessaging();
    getToken(messaging, { vapidKey: 'key' })
    .then((currentToken) => {
      console.log("currentToken", currentToken);
      
    })
    onMessage(messaging, (payload) => {
      console.log('Message received. ', payload);
      // ...
    });