Vue3.js ）错误：找不到模块'firebase'

Question

我在vue.js中第一次使用firebase。使用npm安装firebase后，我将其添加到main.js中，如下所示。

//main.js
import { createApp } from "vue";
import App from "./App.vue";
import Router from "./router.js";
// bootstrap
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

// firebase
import firebase from "firebase";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

firebase.initializeApp(firebaseConfig);

createApp(App).use(Router).mount("#app");

这是 package.json

  "dependencies": {
    "bootstrap": "^5.1.3",
    "core-js": "^3.6.5",
    "firebase": "^9.6.4",
    "vue": "^3.0.0",
    "vue-carousel-card": "^2.0.0",
    "vue-router": "^4.0.12",
    "vue3-carousel": "^0.1.35"
  },

如果我添加 firebase 并像这样运行服务，则显示找不到 firebase 的错误是 output。

This dependency was not found:

* firebase in ./src/main.js

To install it, you can run: npm install --save firebase

可以知道这是什么原因和解决方法吗？ 永远谢谢你。

Answer 1

您正在使用 "firebase": "^9.6.4" ，它使用不同的导入方式。

可以降级为firebase 8：

npm remove firebase
npm add firebase@^8.10.0

但是如果你想使用 firebase 9 你可以使用

import firebase from 'firebase/compat/app' //v9

firebase.initializeApp({
   ...
})

或者

import { initializeApp } from 'firebase/app';

initializeApp({
  ...
})

Answer 2

我遇到了同样的问题，我找到了解决方案：更改您的 firebase 版本，它会工作。

npm remove firebase
npm add firebase@^8.10.0