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

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