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

Question

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

Answer 1

在 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,
};