Как сохранить учетные данные Firebase в проектах Vue.js после сборки (env_var)

Question

Я пытался развернуть свое приложение 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 я создал экспресс-приложение, определил файл process.env, однако при запуске сервера я получаю сообщение об ошибке из-за отсутствия env_vars. Я пытался увидеть логи на передней и задней консоли. Я вижу envs на консоли узла, но не в браузере. Я также попытался развернуть это приложение на хостинге heroku и firebase. В обоих случаях я добавил envs извне, но ничего не изменилось. (Полагаю, нет никакой разницы в использовании 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');
}

тогда это работает, но на этот раз я могу найти учетные данные в исходном коде.

Answer 1

Вот как вы можете это сделать.

Во-первых, добавьте 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 настроен для вас

Надеюсь, это поможет!