如何在 nx 工作区中将 env 变量传递给客户端？

Question

我是运行 NX 工作区中的 nextJS 应用程序，我需要在客户端访问环境变量。

/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/页/_app.tsx

import nextConfig from 'next/config'
const { publicRuntimeConfig } = nextConfig()
// ...
console.log(process, publicRuntimeConfig)

运行通过 nx serve myproject 的应用程序在客户端没有给我任何输出，但在服务器端我确实看到了 NEXT_PUBLIC_PROJECT 值。我不太确定 nx 是否读取了我的 next.config.js 文件...

Answer 1

当你是运行 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/

祝你好运，尤金。

Answer 2

对于仍然遇到此问题的任何人。
要在 React 项目中加载 env 变量，需要以下内容：

在应用程序级别创建 .env 文件。
示例：apps/myReactApp/.env
添加前缀为 NX
的变量例子：如果您可以将变量命名为 "APP_NAME"，则在其中添加 "NX_APP_NAME"。 NX 仅加载那些以 "NX".

如果你想为不同的配置加载不同的 env 文件，那么你可以这样做：

For QA: `npx env-cmd -f apps/web-client/.env.qa nx run web-client:build:qa`,  
For staging: `npx env-cmd -f apps/web-client/.env.staging nx run web-client:build:staging`, 
NOTE: you need to install env-cmd package

有关加载环境变量的更多信息，请参见 doc。

如何在 nx 工作区中将 env 变量传递给客户端？

How to pass env variable to client side in a nx workspace?

javascript

environment-variables

next.js

nx.dev