Uncaught ReferenceError: firebase is not defined vue js

Posted 2023-02-22

【中文标题】Uncaught ReferenceError: firebase is not defined vue js

【英文标题】：

【发布时间】：2020-05-05 22:53:45

【问题描述】：

我有一个订阅按钮，我编写了一个小函数，但出现上述错误

methods: 
    subscribe()
        firebase.messaging.requestPermission()
                          .then(() => 
                              console.log('Notification permission granted.');
                              return this.messaging.getToken();
                          )
    

按钮

<button id="subscribe" @click="subscribe">Subscribe</button>

【问题讨论】：

您似乎没有正确集成 FCM javascript SDK。

应该在哪里整合它？

【参考方案1】：

1.将firebase安装到您的项目中：

npm install --save firebase

2.然后在您的项目中添加消息传递模块。例如。 index.js 文件。

import 'firebase/messaging'

3.然后在您的组件中使用消息传递：

import firebase from 'firebase';

...

methods: 
    subscribe () 
        const messaging = firebase.messaging();
        messaging.requestPermission().then(
            ...
        );
    

请记住，Firebase SDK 是模块化的，尽管您引用了 firebase 包中的所有内容，但如果您没有在最终包中包含引用模块（在这种情况下为消息传递）， firebase 会抱怨它丢失了。

查看此处了解更多信息： https://firebase.google.com/docs/web/setup

【讨论】：

收到错误 TypeError: firebase__WEBPACK_IMPORTED_MODULE_9___default.a.messaging.requestPermission is not a function"

你做了第二步吗？并且不要忘记消息是一个函数而不是一个属性。所以你应该这样做：firebase.messaging().requestPermission()

你试过firebase.messaging().requestPermission()而不是firebase.messaging.requestPermission()吗？

firebase.messaging().requestPermission() 抛出错误已弃用符号，请查阅文档以获得更好的替代方案

那是因为 requestPermission() 方法已被弃用。看看这里：firebase.google.com/docs/reference/js/…