Heroku环境变量在节点js中工作，但不能在React中工作

在Web开发中，环境变量用于存储应用程序运行时需要的配置信息，如数据库连接字符串、API密钥等。这些信息通常不会硬编码在代码中，而是通过环境变量来管理，以提高安全性和灵活性。

基础概念

环境变量：操作系统提供的键值对，可以在应用程序运行时访问。它们允许开发者根据不同的部署环境（如开发、测试、生产）使用不同的配置。

Node.js：一个基于Chrome V8引擎的JavaScript运行时，允许在服务器端执行JavaScript代码。

React：一个用于构建用户界面的JavaScript库，通常与Node.js一起使用来创建前端应用。

在Node.js中使用环境变量

在Node.js中，你可以使用process.env对象来访问环境变量。例如：

const dbPassword = process.env.DB_PASSWORD;

在React中使用环境变量

React应用通常在客户端运行，因此直接访问Node.js的环境变量是不可行的。但是，你可以使用Create React App提供的方法来处理环境变量。

设置环境变量

在React项目的根目录下创建.env文件，并添加环境变量：

REACT_APP_API_KEY=your_api_key_here

注意：环境变量名必须以REACT_APP_开头，这是Create React App的约定。

访问环境变量

在React组件中，你可以这样访问环境变量：

const apiKey = process.env.REACT_APP_API_KEY;

常见问题及解决方法

1. 环境变量未生效

确保你的环境变量文件名正确（如.env），并且变量名以REACT_APP_开头。

2. 构建或部署时未加载环境变量

如果你在构建或部署过程中遇到问题，确保你的构建工具（如Webpack）配置正确，并且在构建过程中包含了环境变量。

3. 在不同环境中使用不同的环境变量

你可以为不同的环境创建不同的.env文件，如.env.development、.env.production等。Create React App会根据当前的环境自动加载相应的文件。

示例代码

假设你有一个React应用，需要在开发环境和生产环境中使用不同的API密钥。

.env.development

REACT_APP_API_KEY=dev_api_key_here

.env.production

REACT_APP_API_KEY=prod_api_key_here

在你的React组件中：

import React from 'react';

function App() {
  const apiKey = process.env.REACT_APP_API_KEY;

  return (
    <div>
      <h1>API Key: {apiKey}</h1>
    </div>
  );
}

export default App;

应用场景

• 安全性：敏感信息（如密码、密钥）不应硬编码在代码中。
• 灵活性：根据不同的部署环境使用不同的配置。
• 可维护性：集中管理配置信息，便于更新和维护。

总结

在React中使用环境变量需要遵循Create React App的约定，并确保在构建过程中正确加载这些变量。通过这种方式，你可以安全且灵活地管理不同环境下的配置信息。