我正在集成Firebase Cloud Messaging,它需要在公共文件夹中有firebase-messaging-sw.js
文件作为服务工作者。该文件需要有我的firebase配置,我当然想在环境变量中隐藏细节。我定义了这样的对象:
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};
但是现在,当我为通知给予权限时,它试图注册service worker,我得到了错误:caught ReferenceError: process is not defined
。我在一个.env.local
文件中定义了这些变量,我已经在我的应用程序中的其他地方成功地使用了这些相同的变量。
如何从公用文件夹中的文件访问它们?
2条答案
按热度按时间ymzxtsji1#
在nextjs中,public文件夹中的文件不会经过webpack的构建过程,这就是为什么使用
process is undefined
。要在
firebase-messaging-sw.js
文件中使用环境变量,请检查以下步骤。首先,创建一个
.env.local
文件,如果你已经有了,跳过这一步。用
npm i dotenv
安装dotenv
包,我们将用它来加载环境变量。在根目录中创建一个名为
swEnvbuild.js
的文件。在您刚刚创建的swEnvbuild.js
文件中,我们将创建一个函数,该函数加载.env.local
文件,然后将文件内容写入公用文件夹中名为swenv.js
的新文件然后,我们将从
swEnvBuild.js
生成的名为swenv.js
的文件导入到firebase-messaging-sw.js
文件中。最后,更新package.json。
运行
npm run dev
后,应该可以使用process.env
在firebase-messaging-sw.js
中访问环境变量hiz5n14c2#
您需要在环境变量前面加上
NEXT_PUBLIC_
,以便它们在public目录中的文件中工作。从文件中引用,
为了向浏览器公开一个变量,你必须在变量前面加上NEXT_PUBLIC_