我在项目中设置和读取环境变量时遇到问题NextJS
。
我有两个console logs
:
console.log('env', process.env.NODE_ENV);
console.log('backend url', process.env.BACKEND_URL);
运行代码而不执行任何操作会返回我所期望的结果:
env development
backend url undefined
像这样导出变量:
NODE_ENV=production
BACKEND_URL=url
不仅打印以前的值,而且还在控制台中显示以下消息:
⚠ 您在环境中使用非标准“NODE_ENV”值。这会导致项目不一致,强烈建议不要这样做。了解更多: https://nextjs.org/docs/messages/non-standard-node-env
像这样导出:
export NODE_ENV=production
export BACKEND_URL=url
也打印相同的内容,包括警告。
NodeJS
像这样运行:
BACKEND_URL=url NODE_ENV=production npm run dev
打印出来是一样的。echo
ing vars 打印正确的值。
这不仅仅是console.logs
,我尝试在代码的其他部分使用这些值,它们的行为就好像这些值仍然是development
和undefined
。
我也尝试过使用一个.env
文件:
NODE_ENV=production
BACKEND_URL=url
我可以看到它正在被读取,因为当我启动服务器时NextJS
,我看到以下内容:
next dev -p 8080
▲ Next.js 14.1.4
- Local: http://localhost:8080
- Environments: .env
当文件不存在时,它所在的行Environment: .env
不会出现。
最后,我检查了~/.bashrc
和~/.zshrc
,他们没有提到NODE_ENV
或BACKEND_URL
。
可能会发生什么?
如果您在前端调用
env
变量(我假设是这样),则必须NEXT_PUBLIC_
在变量上添加前缀。在此处查看其官方文档的更多信息 - https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser
您不必导出 .env 文件中的变量。您只需声明如下变量: NEXT_PUBLIC_NODE_ENV=product NEXT_PUBLIC_BACKEND_URL=https://nextjs.org/docs/messages/non-standard-node-env
即使变量是字符串,也不需要将其值放入任何引号中。
PS .env 文件中变量命名有一个约定:所有变量标识都应该大写,并且应该有“NEXT_PUBLIC_”前缀。
然后您可以在代码中使用这些变量,如下所示: ... process.env.NEXT_PUBLIC_BACKEND_URL ...
最重要的一点是,您应该小心,不要像普通文件一样将 .env 文件公开。