从客户端应用程序访问环境变量

我想从位于根目录中的 .env 文件访问环境变量，并使用 dotenv 在我的 App.js React 文件中使用它们。但是，我无法访问它们。在客户端（App.js）。

文件结构：

我想使用的变量：根/.env
我想在其中使用它们的文件：根/客户端/src/App.js

.env 文件：

PORT=5432  
TEST=911  
REACT_APP_WEATHER=12345678

应用程序.js 文件

import './App.css';
require("dotenv").config();

// Doesn't show the variables in the .env file
console.log(process.env);

function App() {
  return (
    <div className="App">
      Hello
    </div>
  );
}

export default App;

我读到 dotenv （安装在我的根目录中）不适用于客户端，仅适用于服务器端在 React 中使用环境变量 https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5。我需要安装该 webpack 吗？我尝试将其安装在我的客户端中，但它产生了许多错误。

注意：我想将服务器和客户端环境变量存储在同一个 .env 文件中

With create-react-app你不必使用dotenv类似的图书馆。读取自.env文件中您所要做的就是在所有变量名称前添加前缀REACT_APP_。例如：

REACT_APP_PORT=5432  
REACT_APP_TEST=911  
REACT_APP_WEATHER=12345678

create-react-app将在构建期间自动将其提供给您。在您的 React 应用程序上，您可以从任何地方console.log this:

console.log(process.env.REACT_APP_PORT); //5432