React应用使用dotenv传递环境变量返回undefined，如何解决？

以下是针对你问题的具体排查和解决步骤：

• 修正.env文件路径
  你的文件结构里.env位于src目录下，但Webpack配置文件在根目录，当前dotenv.config({ path: './.env' })指向的是根目录的.env，实际无法找到目标文件。修改路径为：

  dotenv.config({ path: './src/.env' });
  

• 改用dotenv-webpack简化配置
  既然已经安装了dotenv-webpack，可以直接用它替代手动的dotenv+DefinePlugin组合，避免手动拼接出错：

  const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const Dotenv = require('dotenv-webpack');
  
  module.exports = {
    plugins: [
      new HtmlWebpackPlugin(),
      new Dotenv({
        path: './src/.env' // 对应你的.env文件实际路径
      })
    ],
  };
  

  该插件会自动将.env中的变量注入到process.env中，无需手动配置DefinePlugin。

• 重启Webpack开发服务器
  修改Webpack配置或.env文件后，必须重启开发服务器，否则新配置不会生效。

• 检查.env文件格式
  确保.env文件中变量没有多余空格或引号，正确格式如下：

  API_URL=http://localhost:3006
  

  不要写成API_URL = http://localhost:3006（等号前后有空格）或API_URL="http://localhost:3006"（带引号）。

• 验证变量读取情况
  可以在Webpack配置中先打印变量，确认是否成功读取：

  const dotenv = require('dotenv');
  const result = dotenv.config({ path: './src/.env' });
  if (result.error) {
    throw result.error;
  }
  console.log('已加载的环境变量:', result.parsed); // 查看是否包含API_URL
  

内容的提问来源于stack exchange，提问作者sassy.M