javascript - 如何在 Nuxt Config 中使用 Firebase 环境变量
问题描述
我正在尝试将 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 包。
解决方案
这是一个@nuxtjs/dotenv
问题(我认为)。
关于在 nuxt.config.js 文档中使用 .env 文件,对于这种情况,您应该直接使用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})
推荐阅读
- laravel - Laravel - 如何使用外部 API 的参数搜索并重定向到下一页
- javascript - 无法将文本框值写入 .text 文件
- django - 带有 Q 的 Django 查询集给出了错误的长度
- r - 从ggplot图例中删除关键字母
- debugging - 调试 .net 核心 WebApp 非常慢
- excel - 设置一个用户表单文本框以根据用户表单命令按钮将数据输入活动工作表和范围?
- node.js - Jenkins NodeJS 插件在使用 npm ci 的安装阶段失败
- webpack-5 - 如何将 terser webpack 插件迁移到 webpack v5
- apache-kafka - Spring Integration Message Driven Channel Adapter 不适用于 Spring-Kafka 2.3+
- git - Composer + VCS + 更新到最新提交的版本