使用firebase托管时如何在vuejs的环境变量中保存firebase配置参数答案

【问题标题】：How to save firebase config parameters in environment variables in vuejs when using firebase hosting使用firebase托管时如何在vuejs的环境变量中保存firebase配置参数
【发布时间】：2019-12-30 08:52:42
【问题描述】：

我是 Firebase 的新手。我已经将它应用到我的 vuejs 项目中。如何将 firebase 配置参数保存到环境变量中。或者有没有更好的方法来实现这一点。

【问题讨论】：

标签： firebase vue.js vuejs2 google-cloud-firestore

【解决方案1】：

您始终可以创建一个包含所有配置设置的新文件并 gitignore 该文件，从而确保其安全。

这仅取决于您的项目结构。只需将此文件导入任何需要的地方，而不会影响您的安全

【讨论】：

【解决方案2】：

在 vue 中使用 .env.js 文件

这实际上并不是真正需要的，因为您也可以将配置直接存储在 main.js 文件中。此外，这些 firebase 配置数据是公开的，不需要保护。仍然是你的做法。

在您的 prod.env.js 文件（位于文件夹 config 下的我的设置）中添加

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  FIREBASE_API_KEY: '"APIKEY"',
  FIREBASE_AUTH_DOMAIN: '"YOURID.firebaseapp.com"',
  FIREBASE_DATABASE_URL: '"YOURURL"',
  FIREBASE_PROJECT_ID: '"YOURID"',
  FIREBASE_STORAGE_BUCKET: '""',
  FIREBASE_MESSAGING_SENDER_ID: '"YOURSENDERID"',
  FIREBASE_APP_ID: '"YOURAPPID"',
}

在main.js 中使用process.env.VARIABLENAME 调用环境变量。

这是 firebase 的设置：

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
};

【讨论】：