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

Question

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

文件结构：

我想使用的变量： root/.env
我想在其中使用它们的文件： root/client/src/App.js

.env 文件：

PORT=5432  
TEST=911  
REACT_APP_WEATHER=12345678

App.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 中的环境变量。 我需要安装那个 webpack 吗？ 我尝试在我的客户端中安装它，但它产生了很多错误。

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

Answer 1

使用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以下操作：

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