无法在 Vue Web 应用程序中初始化 firebase答案

【问题标题】：Unable to Initialize firebase in Vue web app无法在 Vue Web 应用程序中初始化 firebase
【发布时间】：2020-08-31 04:25:42
【问题描述】：

我正在尝试在我的 vue 应用中使用 Cloud Firestore 数据库集合。但是，当我运行 npm run serve 在浏览器中加载我的 vue 应用程序时，我遇到了一个错误：

This relative module was not found:

* ./firebaseInit in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

我已经确定安装npm install firebase --save，但我仍然收到上述错误。

我有两个文件在我的根目录中设置 firebase，firebaseConfig.js 保存我的应用程序设置，firebaseInit.js 在我的应用程序中导入和导出 firebase。下面是我的目录结构截图。

// firebaseConfig.js
export default {
  //mock data
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
}

// firebaseInit.js
import firebase from 'firebase/app'
import 'firebase/firestore'
import firebaseConfig from './firebaseConfig'
const firebaseApp = firebase.initializeApp(firebaseConfig)
export default firebaseApp.firestore()

当我尝试在我的 app.js 文件中导入 firebaseInit.js 时，我遇到了上述错误。

// App.vue
... <template>
<script>
import db from './firebaseInit'

</script>

我已尝试查看文档并在 App.vue 中注册配置文件，但没有奏效。

【问题讨论】：

您能否显示包含这些文件的目录的屏幕截图？
我刚刚添加了目录@Phil的截图
假设App.vue 在您的src 目录中，您需要import db from "../firebaseInit.js"。不过就个人而言，我会将这些脚本移至src
这能回答你的问题吗？ Import file based on relative path in JavaScript
将两个 firebase 脚本移动到 src 目录解决了这个问题。谢谢！

标签： firebase vue.js google-cloud-firestore

【解决方案1】：

将此添加到 firebaseInit.js

export default const db = firebaseApp.firestore();

我遇到了类似的问题。我还将这 2 个文件合并为一个名为 firebaseApp.js 的文件，如下所示

import firebase from 'firebase'
import 'firebase/firestore'

var firebaseConfig = {
    apiKey: "AIzaSyDoAX0RM_eB_Zv7_P3ENJZOe97jaN5-JNE",
    authDomain: "vuefs-prod-trav.firebaseapp.com",
    projectId: "vuefs-prod-trav",
    storageBucket: "vuefs-prod-trav.appspot.com",
    messagingSenderId: "378644247244",
    appId: "1:378644247244:web:1a06b2e6c30c5ac2e54869",
    measurementId: "G-ZVGYPK8YRX"
}

firebase.initializeApp(firebaseConfig)
var db = firebase.firestore()
export default db

最后，将其导入为： import db from './firebaseApp' 在 <script> 的 example.vue 文件中。

希望对你有帮助！！

【讨论】：

【解决方案2】：

正如@Phil 在 cmets 中提到的，您可以使用导入脚本

import db from "../firebaseInit.js"

../ 表示您正在从顶级目录导入，或者您可以将脚本放在同一个 src 文件夹中并保持导入不变。

【讨论】：