Vue 3项目引入Firebase NPM包后编译失败问题求助

你安装的是Firebase 9.x版本，该版本做了破坏性更新，默认使用模块化API，不再支持8.x及更早版本的命名空间导入语法。你当前使用的老版本导入方式会触发依赖解析异常，不是Vue编译器的问题。
另外你代码里存在笔误：firebase.js中定义的配置变量名为config，但调用initializeApp时传的是firebaseConfig，变量名不统一也需要修正。

方案1：使用兼容模式（保留原有写法无需大改） #

直接修改src/firebase.js的导入语句为Firebase 9提供的兼容包路径即可：

// 替换原有导入语句
import firebase from 'firebase/compat/app'
import 'firebase/compat/messaging'

// 修正变量名统一
const firebaseConfig = {
    apiKey: "<key>",
    authDomain: "<domain>",
    databaseURL: "<url>",
    projectId: "<id>",
    storageBucket: "<bucket>",
    messagingSenderId: "<id>",
    appId: "<id>",
    measurementId: "<id>"
};

firebase.initializeApp(firebaseConfig)

export default firebase.messaging()

修改完成后重新运行npm run serve即可正常编译。

方案2：使用官方推荐的模块化API（推荐，打包体积更小） #

完全适配Firebase 9的模块化写法，修改src/firebase.js如下：

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

const firebaseConfig = {
    apiKey: "<key>",
    authDomain: "<domain>",
    databaseURL: "<url>",
    projectId: "<id>",
    storageBucket: "<bucket>",
    messagingSenderId: "<id>",
    appId: "<id>",
    measurementId: "<id>"
};

const app = initializeApp(firebaseConfig)
const messaging = getMessaging(app)

export default messaging

你当前main.js中调用了两次app.mount('#app')，属于重复挂载，需要删除其中一行，否则会触发运行时错误。

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