如何在 Nuxt Config 中使用 Firebase 环境变量

Question

我正在尝试将 Firebase Creds 从我的 Nuxt 配置文件中分离出来。但它说 NuxtServerError Your API key is invalid, please check you have copied it correctly. 当我将我的信用直接用于我的 nuxt 配置（没有环境变量）时，它工作正常。

我正在使用@nuxtjs/firebase模块，这是我的配置：firebase ssr/universal auth documentation

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
    '@nuxtjs/firebase',
    '@nuxtjs/pwa',
  ],

  firebase: {
    config: {
      apiKey: process.env.apiKey,
      authDomain: process.env.authDomain,
      databaseURL: process.env.databaseURL,
      projectId: process.env.projectId,
      storageBucket: process.env.storageBucket,
      messagingSenderId: process.env.messagingSenderId,
      appId: process.env.appId,
      measurementId: process.env.measurementId
    },
    services: {
      auth: {
        ssr: true
      }
    }
  },
  pwa: {
    // disable the modules you don't need
    meta: false,
    icon: false,
    // if you omit a module key form configuration sensible defaults will be applied
    // manifest: false,

    workbox: {
      importScripts: [
        // ...
        '/firebase-auth-sw.js'
      ],
      // by default the workbox module will not install the service worker in dev environment to avoid conflicts with HMR
      // only set this true for testing and remember to always clear your browser cache in development
      dev: false
    }
  }

我已将我所有的信用存储在我的应用程序的 .env 文件中（带引号）。

apiKey="my_key"
authDomain="my_domain"
databaseURL="my_db_url"
projectId="my_project_id"
storageBucket="my_storage_bucket"
messagingSenderId="my_sender_id"
appId="my_app_id"
measurementId="my_measurement_id"

有什么方法可以将我的凭据与 nuxt 配置文件分开（我正在 github 上提交我的 nuxt 配置文件）。

PS：我的环境变量可以使用 process.env.apikey 和其他从我的应用程序组件控制台记录。我也安装了@nuxtjs/dotenv包。

Answer 1

这是一个 @nuxtjs/dotenv 问题（我认为）。

关于 Using .env file in nuxt.config.js 文档，对于这种情况，您应该直接使用 dotenv 模块而不是 @nuxtjs/dotenv。

nuxt.config.ts样本

import dotenv from 'dotenv'

let path =
  process.env.NODE_ENV === 'production'
   ? '.env'
   : '.env.' + process.env.NODE_ENV

dotenv.config({path})

export default {
 ....
 // Now, you are able to use process.env.<property_from_dotenv>
 env: {
  apiKey: process.env.apiKey,
  authDomain: process.env.authDomain,
  databaseURL: process.env.databaseURL,
  projectId: process.env.projectId,
  storageBucket: process.env.storageBucket,
  messagingSenderId: process.env.messagingSenderId,
  appId: process.env.appId,
  measurementId: process.env.measurementId
 },
}

nuxt.config.js样本

const dotenv = require('dotenv');

let path =
  process.env.NODE_ENV === 'production'
   ? '.env'
   : '.env.' + process.env.NODE_ENV

dotenv.config({path})

Answer 2

我也为这个问题苦恼过。我使用相同的设置。

添加：

require('dotenv').config()

到您的 nuxt.config.js 文件的顶部。这允许配置访问您的本地 .env 文件。

Answer 3

Nuxt 有自己的烘焙环境变量处理。阅读文档中的 publicRuntimeConfig: {} 和 privateRuntimeConfig {}。您不再需要 dotenv 依赖。

如何在 Nuxt Config 中使用 Firebase 环境变量

How to use Firebase Environment Variables in Nuxt Config

javascript

firebase

nuxt.js

dotenv