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

2024-07-27 • 问答

我正在尝试从Nuxt Config文件中分离Firebase Creds。但是这就是说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配置文件分开（我将我的nuxt配置文件提交到我的github上）。

PS：我的环境变量可以使用process.env.apikey等从我的应用程序组件中进行控制台记录。我还安装了@ nuxtjs / dotenv软件包。

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

那是一个@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})

我也在这个问题上苦苦挣扎。我使用相同的设置。

添加：

require('dotenv').config()

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

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

oyangnann 回答：如何在Nuxt Config中使用Firebase环境变量

大家都在问