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

【问题标题】：Where to add firebase config variables on webpack vue project在 webpack vue 项目中添加 firebase 配置变量的位置
【发布时间】：2018-10-12 18:22:55
【问题描述】：

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

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

我应该把配置变量放在哪里，这样才安全。 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);

【问题讨论】：

请注意，在任何情况下，您的配置都会向公众公开。对于 Vue.js 项目，当您调用 npm run buid 时，它将位于 webpack 在项目 dist 文件夹中生成的 js 文件之一中。但这实际上不是问题。有几篇文章解释了为什么这个配置是公开的不是问题。
见stackoverflow.com/questions/37482366/…
@RenaudTarnec 感谢您的指点！

标签： firebase webpack vue.js firebase-authentication

【解决方案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')

【讨论】：

您的意思是 main.js 还是 App.vue 导致了您发布的 App.vue 的图像？