firebase - 在 webpack vue 项目中添加 firebase 配置变量的位置

Question

在我的 Vue webpack 项目上实现 Firebase 身份验证。谷歌tells me to add将配置添加到我的 index.html 文件中。

如果您这样做并查看页面源代码，它会将 api key 公开。我很困惑为什么谷歌会建议这个。

我应该把配置变量放在哪里才安全。 Somebody said 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')