使用 vuejs 时，没有在 html 文件中导入 firebase 脚本标签答案

【问题标题】：firebase script tags are not being imported in html file when using vuejs使用 vuejs 时，没有在 html 文件中导入 firebase 脚本标签
【发布时间】：2021-05-13 00:21:30
【问题描述】：

您好，我正在使用来自VueJs 的安装版本，工作正常我还导入了MaterializeCss 这也可以正常工作，我导入了firebase firestore，全部在index.html 文件中。但是当我尝试在另一个vue 文件中使用db variable 时，它说db 没有定义。我不明白为什么会出现这个错误，因为Materializecss 工作正常。这是我的 HTML 文件。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>

    <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-firestore.js"></script>
    <script>
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      var firebaseConfig = {
        apiKey: "AIzaSyBl17wo7ihuMdACz_iZ3T9rRYZ4_yjSRtI",
        authDomain: "school-boeken.firebaseapp.com",
        projectId: "school-boeken",
        storageBucket: "school-boeken.appspot.com",
        messagingSenderId: "164926430822",
        appId: "1:164926430822:web:a97b3f7bdcec364beb97a7",
        measurementId: "G-M7QE3Y21N2"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();
      var db = firebase.firestore();
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

【问题讨论】：

请添加代码以显示您是如何尝试的。
你想在 Vue 文件中使用 import firebase from '@/plugins/firebase.js'; 和 const db = firebase.firestore(); 吗？
是的，我确实尝试过，但它给了我一个错误，提示找不到 Module: Error: Can't resolve '@/plugins/firebase.js'
那是因为你需要在一个名为plugins 的目录中创建一个firebase.js 文件，在其中添加firebaseConfig 等并导出它。如果您有不同的文件结构，当然也可以。

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

【解决方案1】：

尝试在main .js中连接firebase

import Vue from 'vue'
import App from './App.vue'
import firebase from 'firebase/app'
import 'firebase/firestore'


export const db = firebase.initializeApp({
    apiKey: "AIzaSyBl17wo7ihuMdACz_iZ3T9rRYZ4_yjSRtI",
        authDomain: "school-boeken.firebaseapp.com",
        projectId: "school-boeken",
        storageBucket: "school-boeken.appspot.com",
        messagingSenderId: "164926430822",
        appId: "1:164926430822:web:a97b3f7bdcec364beb97a7",
        measurementId: "G-M7QE3Y21N2"
}).firestore()

export const firestore = firebase.firestore()


new Vue({    
  render: h => h(App)
}).$mount('#app')

然后在你可以使用的组件中

import {db} from '@/main.js'

【讨论】：

为什么在main.js 中这样做？在它自己的firebase.js 文件中执行此操作不是更好的做法吗？
我同意。也许你是对的。我同意。也许你是对的。但是这个选项有生命权）