Firebase NPM 包无法在 vue 3 上编译

Posted 2023-02-22

【中文标题】Firebase NPM 包无法在 vue 3 上编译

【英文标题】：Firebase NPM package fails to compile on vue 3

【发布时间】：2021-10-29 12:39:09

【问题描述】：

将 firebase 安装为 npm 包并将其导入 vue 项目。在尝试运行 vue 项目时，我收到以下错误

ERROR  Failed to compile with 1 error                                                                                                 01:06:50

This dependency was not found:

* https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js in ./node_modules/firebase/firebase-messaging.js

To install it, you can run: npm install --save https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js
           

package.json 看起来像这样

  "name": "vue-push-notif",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  ,
  "dependencies": 
    "firebase": "^9.0.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  ,
  "devDependencies": 
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]

在 src 中创建了一个 firebase.js，如下所示

import firebase from 'firebase/app'
import 'firebase/firebase-messaging'

var config = 
    apiKey: "<key>",
    authDomain: "<domain>",
    databaseURL: "<url>",
    projectId: "<id>",
    storageBucket: "<bucket>",
    messagingSenderId: "<id>",
    appId: "<id>",
    measurementId: "<id>"
;

firebase.initializeApp(firebaseConfig)

export default firebase.messaging()

main.js 在下面

import  createApp  from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import firebaseMessaging from './firebase.js'

const app = createApp(App)

app.config.globalProperties.$messaging = firebaseMessaging

app.use(store).use(router).mount('#app')

app.mount('#app')

看来vue编译器并没有把它当作远程资源，而是在本地寻找。也许问题出在 vue 编译器上？？

感谢您的帮助...！！

【参考方案1】：

您没有使用新的 Firebase Modular SDK 语法。您必须将导入更改为：

import  initializeApp  from 'firebase/app'
import  getMessaging  from 'firebase/messaging'

const app = initializeApp(firebaseConfig)

const messaging = getMessaging(app)

export  messaging 

您可以在以下位置阅读更多相关信息：Set up a javascript Firebase cloud messaging client