NX monorepo中应用无法读取自定义环境变量怎么办？

• 修正环境变量前缀
  NX默认仅将带有NX_前缀的环境变量注入到前端应用运行时，你使用的REACT_APP_是CRA默认规则，在NX体系下默认不生效，可直接将变量名修改为NX_REACT_APP_API_BASE即可符合默认规则。
  若需保留REACT_APP_前缀，在根目录nx.json中添加如下配置：

  {
    "targetDefaults": {
      "build": {
        "envPrefix": ["REACT_APP_", "NX_"]
      },
      "serve": {
        "envPrefix": ["REACT_APP_", "NX_"]
      }
    }
  }
  

• 配置根目录env文件加载规则
  要让NX识别根目录下的.env/.env.local文件，需在根目录nx.json的namedInputs中添加全局env文件路径：

  {
    "namedInputs": {
      "sharedGlobals": ["{workspaceRoot}/.env", "{workspaceRoot}/.env.local"]
    }
  }
  

• 检查打包器配置
  • 若使用Webpack打包：确认应用的webpack.config.js中已正确引入NxWebpackPlugin，未手动移除默认的环境变量注入逻辑
  • 若使用Vite打包：确认应用的vite.config.ts中已引入@nx/vite/plugins/nx-env-plugin，若手动配置过env相关规则，需将目标变量加入define字段暴露到前端
• 重启开发服务
  所有env相关配置修改完成后，必须停止当前的nx serve进程，重新启动服务后配置才会生效，变量即可通过process.env.REACT_APP_API_BASE（保留前缀的情况）或者process.env.NX_REACT_APP_API_BASE（修改前缀的情况）正常读取。

内容的提问来源于stack exchange，提问作者Chase Dudas