构建后如何在 Vue.js 项目中存储 Firebase 凭据（env_var）

Posted 2023-02-22

【中文标题】构建后如何在 Vue.js 项目中存储 Firebase 凭据（env_var）

【英文标题】：How to store Firebase credentials in Vue.js projects after building (env_var)

【发布时间】：2019-08-19 02:25:39

【问题描述】：

我一直在尝试部署我的 firebase&vue 应用。 但是我无法将 firebase 凭据添加到 env 变量。

基本上这是vue.js上的结构

配置

---- key.js

----keys_dev.js

----keys_prod.js

key.js

if(process.env.NODE_ENV == 'production')
    module.exports = require('./keys_prod');
 else 
    module.exports = require('./keys_dev');

keys_dev.js

module.exports = 
firebase: 
    apiKey: "*********************************",
    authDomain: "*****************************",
    databaseURL: "****************************",
    projectId: "******************************",
    storageBucket: "**************************",
    messagingSenderId: "**********************",
      

keys_prod.js

module.exports = 
  firebase: 
    apiKey: process.env['FIREBASE_apiKey'],
    authDomain: process.env['FIREBASE_authDomain'],
    databaseURL: process.env['FIREBASE_databaseURL'],
    projectId: process.env['FIREBASE_projectId'],
    storageBucket: process.env['FIREBASE_storageBucket'],
    messagingSenderId: process.env['FIREBASE_messagingSenderId'],
  

我也在 keys_prod.js 中尝试过这样的操作，但我想我们不能在 env_var 中使用对象，所以我将其更改为上面的代码。

module.exports = 
  firebase: process.env.FIREBASE_CONFIG

在 npm run build 之后，我创建了 express 应用程序，定义了 process.env，但是当我运行服务器时，由于缺少 env_vars 而出现错误。 我试图在前端和后端控制台上查看日志。我可以在节点控制台上看到环境，但在浏览器中看不到。 我还尝试将此应用程序部署到 heroku 和 firebase 托管。在这两种情况下，我都在外部添加了环境，但没有任何改变。 （我想在 localhost 或远程服务器中使用 env_vars 没有区别吗？）

最后我尝试更改 keys.js (keys_prod > keys_dev)

if(process.env.NODE_ENV == 'production')
    module.exports = require('./keys_dev');
 else 
    module.exports = require('./keys_dev');

那么它就可以了，但是我这次可以在源代码中找到凭据。

【问题讨论】：

你可以试试VUE_APP_FIREBASE_CONFIG并确认

keys_prod (vue.js) module.exports = firebase: process.env.VUE_APP_FIREBASE_CONFIG .env (node.js) VUE_APP_FIREBASE_CONFIG= “apiKey”：“”，“authDomain”：“”，“databaseURL”：“”，“projectId”：“”，“storageBucket”：“", "messagingSenderId": "" 没有任何改变，当我控制台登录 node.js 时，我看不到 env_vars。我可以使用这样的对象吗？或者我应该使用原语。

告诉我你想把firebase变量放在env文件还是.js工作？

【参考方案1】：

有一个比其他答案更好的方法。您不需要导入 - 这会将设置带入部署的 JS，这不是一个好主意。

在 Vue 应用的根目录中创建一个类似 .env.local 的文件，如下所示：

$ cat .env.local
# REMEMBER:
# ----------------------------------------------------------
# In development, *restart* "yarn serve" to pick up changes.
# ----------------------------------------------------------
VUE_APP_FIREBASE_API_KEY='1234-F1xH53UCnk'
VUE_APP_FIREBASE_AUTH_DOMAIN='your-web-1234.firebaseapp.com'
VUE_APP_FIREBASE_DATABASE_URL='https://your-web-1234.firebaseio.com'
VUE_APP_FIREBASE_PROJECT_ID='your-web-1234'
VUE_APP_FIREBASE_STORAGE_BUCKET='your-web-1234.appspot.com'
VUE_APP_FIREBASE_MESSAGING_SENDER_ID='12345678'
VUE_APP_FIREBASE_APP_ID='1:1234:web:0398509235'

无论你想在哪里使用 firebase，都可以执行以下操作：

function getFirebaseConfig() 
  const firebaseConfig = 
    // see .env file for instructions
    apiKey: process.env.VUE_APP_FIREBASE_API_KEY || 'api-key-not-set',
    authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN || 'env-not-set',
    databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL || 'env-not-set',
    projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID || 'env-not-set',
    storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET || 'env-not-set',
    messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID || 'env-not-set',
    appId: process.env.VUE_APP_FIREBASE_APP_ID || 'env-not-set',
  
  return firebaseConfig


// Initialize Firebase
firebase.initializeApp(getFirebaseConfig())

我使用的是 TypeScript，所以我把它放在一个名为 cloud-functions.ts` 的文件中，在上面之后，我有：

export const postContactFunc = firebase.functions().httpsCallable('postContact')

然后，在我想使用该功能的地方，我有：

// somewhere-else.ts
import postContactFunc from '@/services/cloud-functions'

请注意，.env*.local 永远不会签入。

为了提醒自己该文件应该是什么，我在.env 中有此内容，已签入：

$ cat .env
# REMEMBER:
# ----------------------------------------------------------
# DO NOT EDIT THIS FILE
#
# Edit .env.local or similar.
# ----------------------------------------------------------

# Get these from console - look on the _app_ area not the _project_ area.
VUE_APP_FIREBASE_API_KEY='not-set-yet'
VUE_APP_FIREBASE_AUTH_DOMAIN='not-set-yet'
VUE_APP_FIREBASE_DATABASE_URL='not-set-yet'
VUE_APP_FIREBASE_PROJECT_ID='not-set-yet'
VUE_APP_FIREBASE_STORAGE_BUCKET='not-set-yet'
VUE_APP_FIREBASE_MESSAGING_SENDER_ID='not-set-yet'
VUE_APP_FIREBASE_APP_ID='not-set-yet'

【参考方案2】：

这里是如何做到的。

首先，将dev.env 添加到您的项目中并添加firebase 变量。

FIREBASE_CONFIG: 
    apiKey: "*********************************",
    authDomain: "*****************************",
    databaseURL: "****************************",
    projectId: "******************************",
    storageBucket: "**************************",
    messagingSenderId: "**********************",
 

在 dev.env.js 中导入文件

import merge from 'webpack-merge';
import env from './dev.env';

module.exports = merge(env, 
  NODE_ENV: 'development'

现在，使用

初始化您的 Firebase 应用

import * as firebase from 'firebase';
firebase.initializeApp(VUE_APP_FIREBASE_CONFIG)

给你！ Firebase 已为您设置好

希望这会有所帮助！