теги скрипта firebase не импортируются в html-файл при использовании vuejs

#javascript #html #firebase #vue.js #google-cloud-firestore

#javascript #HTML #firebase #vue.js #google-облако-firestore

Вопрос:

Здравствуйте, я использую установленную версию из VueJs с, которая работает нормально, я также импортировал MaterializeCss , это тоже работает нормально, и я импортировал firebase firestore все в index.html файл. Но когда я пытаюсь использовать db variable в другом vue файле, он говорит, что 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>

1. Пожалуйста, добавьте код, чтобы показать, как вы это пробовали.

2. Есть ли у вас что-то вроде import firebase from '@/plugins/firebase.js'; и const db = firebase.firestore(); в файле Vue, в котором вы хотите его использовать?

3. Да, я пробовал это, но это выдало мне сообщение об ошибке: модуль не найден: Ошибка: не удается разрешить ‘@/plugins/firebase.js ‘

4. Это потому, что для этого вам нужно создать firebase.js файл в вызываемом каталоге plugins , в который добавьте это firebaseConfig и т. Д. И экспортируйте его. Если у вас другая файловая структура, это тоже нормально, конечно.

Ответ №1:

Попробуйте подключиться firebase в main .js

 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'

1. Зачем это main.js делать? Не лучше ли просто сделать это в собственном firebase.js файле?

2. Я согласен. Возможно, вы правы. Я согласен. Возможно, вы правы. Но этот вариант имеет право на жизнь)