Где добавить переменные конфигурации Firebase в проекте WebPack VUE

Question

Реализация аутентификации Firebase в моем проекте Vue Webpack. Google говорит мне добавить конфигурацию в мой файл index.html.

Если вы сделаете это и перейдете к исходному виду страницы просмотра, он предоставит доступ к ключу API. Я не понимаю, почему Google предложил бы это.

Где я должен расположить переменные конфигурации, чтобы это было безопасно. Кто-то сказал , что main.js не очень хорошая идея в производстве.

Где мне сделать следующее на моем сайте Vue.

var config = {
   apiKey: "<API_KEY>",
   authDomain: "<PROJECT_ID>.firebaseapp.com",
   databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
   projectId: "<PROJECT_ID>",
   storageBucket: "<BUCKET>.appspot.com",
   messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);

Answer 1

Вы можете просто сделать это в App.vue

import Firebase from 'firebase'
let config = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    storageBucket: "...",
    messagingSenderId: "..."
  };

let app = Firebase.initializeApp(config)
let db = app.database()
let someDataRef = db.ref('dataset')