React组件无法访问.env文件环境变量问题求助

如果你的项目是用create-react-app初始化的，不需要额外安装dotenv，它已经内置了环境变量处理逻辑，但必须遵守以下规则：

• 所有需要在组件中访问的环境变量，必须以REACT_APP_作为前缀。把你的配置改成REACT_APP_BASE_URL=http://localhost:5000/api
• .env文件必须放在项目根目录（和package.json同级），不能放在src或其他子目录下
• 修改.env文件后，必须重启开发服务器，否则新的环境变量不会被加载生效
• 在组件中访问时，使用process.env.REACT_APP_BASE_URL来获取值

如果是你自己手动配置webpack的自定义React项目，才需要安装dotenv并配置：

1. 安装依赖：npm install dotenv --save-dev
2. 在webpack配置文件顶部加载.env：require('dotenv').config()
3. 通过webpack的DefinePlugin将环境变量注入到项目中：

const webpack = require('webpack');

module.exports = {
  // 其他webpack配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.REACT_APP_BASE_URL': JSON.stringify(process.env.REACT_APP_BASE_URL)
    })
  ]
};

内容的提问来源于stack exchange，提问作者Calisthenics Motivation