從客戶端應用程序訪問環境變量

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