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

【问题标题】：Accessing environment variables from client side app从客户端应用程序访问环境变量
【发布时间】：2021-02-15 15:48:22
【问题描述】：

我想从位于根目录中的 .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（安装在我的根目录中）不能在客户端运行，只能在服务器端 Using environment variables in React 运行。我需要安装那个 webpack 吗？我尝试在我的客户端中安装它，但它产生了很多错误。

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

【问题讨论】：

客户端没有process，也没有环境变量。如果您想将值从服务器传输到客户端，请按照通常的方式进行。
您不要在客户端使用dotenv。你在用create-react-app吗？
@Jayce444 是的，我使用npx create-react-app client 来制作客户端文件夹。那么我将如何访问这些变量
@Bergi 我按照 React 文档来访问环境变量，例如 process.env.NODE_ENV

标签： javascript reactjs webpack environment-variables dotenv

【解决方案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

【讨论】：