如何在 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/

---

最好的祝福，尤金。