process.env读取后自动追加undefined问题求助

问题场景 #

.env配置内容：

URL = http://localhost:3000/

发起fetch请求的代码：

fetch(`${process.env.URL}api/data`, {})

实际请求地址变为 http://localhost:3000/undefinedapi/data；调整路径为${process.env.URL}/api/data后，请求地址变为http://localhost:3000/api/data，但process.env.URL读取后出现undefined的根本问题仍未解决。

可能原因及解决方案 #

1. 环境变量未被正确加载 #

• Node.js环境：需确保已安装并初始化dotenv包，在代码最顶部添加加载逻辑：

  // CommonJS
  require('dotenv').config();
  // ES模块
  import dotenv from 'dotenv';
  dotenv.config();
  

• 前端框架（React/Vue等）：框架对环境变量有前缀要求：
  • React：变量必须以REACT_APP_开头，修改.env为：

    REACT_APP_URL=http://localhost:3000/
    

    代码中使用process.env.REACT_APP_URL读取
  • Vue：变量必须以VUE_APP_开头，同理修改变量名及读取方式

2. .env文件格式问题 #

部分环境变量解析器对赋值时的空格敏感，去掉变量名和值之间的空格：

URL=http://localhost:3000/

3. 验证变量加载状态 #

在代码中添加日志，确认变量是否被正确读取：

console.log(process.env.URL);

如果输出undefined，说明变量未被加载，优先检查加载配置和文件位置。

4. 确认.env文件位置 #

.env文件需放在项目根目录（与package.json同级），否则加载工具无法识别。

内容的提问来源于stack exchange，提问作者Robin Banks