如何解决如何在 nx 工作区中将 env 变量传递给客户端?
我在 NX 工作区中运行 nextJS 应用程序,我需要访问客户端的 env 变量。
/apps/myproject/.local.env
NEXT_PUBLIC_PROJECT=my-super-project
/apps/myproject/next.config.tsx
module.exports = {
publicRuntimeConfig: {
PROJECT: process.env.NEXT_PUBLIC_PROJECT
}
}
在我的 nextJS 应用中,我尝试了几件事:
/apps/myproject/pages/_app.tsx
import nextConfig from 'next/config'
const { publicRuntimeConfig } = nextConfig()
// ...
console.log(process,publicRuntimeConfig)
通过 nx serve myproject
运行应用程序不会在客户端上给我任何输出,但在服务器端我确实看到了 NEXT_PUBLIC_PROJECT
值。我不太确定我的 next.config.js 文件是否被 nx 读取...
解决方法
当您运行 npm build
或 npm start
时,nx - 在后台获取您的环境变量并将它们写入已编译的代码中。因此,您不需要任何特殊的逻辑来访问它们。
因此,在您的前端文件中,只需通过 process.env.SOME_CONST
访问 .env。
另外,关于编译代码的一个有趣的事实是,如果你在调试过程中有这样的记录器:
if(environment === 'development') {
console.log('Log sample');
}
然后从编译的代码中完全省略了这段代码,从而缩小了你的 dist 文件。
这可能对您有用: https://create-react-app.dev/docs/adding-custom-environment-variables/
最好的祝福,尤金。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。