使用Axios无法读取dotenv环境变量，导入dotenv提示未定义

一、先解决「dotenv未找到」的报错 #

1. 检查dotenv是否安装
   打开终端，在项目根目录执行安装命令：

   npm install dotenv --save-dev
   # 或者用yarn
   yarn add dotenv --dev
   

2. 判断是否需要手动导入dotenv
   如果你用的是Create React App、Vite、Next.js这类前端框架，它们已经内置了环境变量处理机制，不需要手动导入和配置dotenv，强行导入反而会报错。这种情况直接跳过dotenv的导入代码，按框架规则配置环境变量即可。

二、解决「process.env变量返回undefined」的问题 #

情况1：普通Node.js项目（非前端框架） #

1. 确保.env文件位置正确
   在项目根目录创建.env文件，内容格式如下：

   RAPID_API_KEY=你的实际密钥
   RAPID_API_HOST=twitch-game-popularity.p.rapidapi.com
   

2. 确认代码执行顺序
   保证dotenv.config()在任何使用process.env的代码之前执行，当前代码顺序没问题，但如果是ES模块（package.json里有"type": "module"），可将dotenv配置放在文件最顶部：

   import dotenv from 'dotenv';
   dotenv.config();
   
   import axios from "axios";
   
   export default axios.create({
     baseURL: "https://twitch-game-popularity.p.rapidapi.com/",
     headers:{
       'X-RapidAPI-Key': process.env.RAPID_API_KEY,
       'X-RapidAPI-Host': process.env.RAPID_API_HOST
     }
   })
   

3. 检查变量名拼写
   确保.env里的变量名和代码里完全一致（大小写敏感），比如代码里用RAPID_API_KEY，.env里不能写成rapid_api_key或RapidApiKey。

情况2：前端框架项目（以CRA、Vite为例） #

Create React App（CRA）

• 环境变量必须以REACT_APP_为前缀，修改.env文件：

  REACT_APP_RAPID_API_KEY=你的实际密钥
  REACT_APP_RAPID_API_HOST=twitch-game-popularity.p.rapidapi.com
  

• 代码中直接使用，无需导入dotenv：

  import axios from "axios";
  
  export default axios.create({
    baseURL: "https://twitch-game-popularity.p.rapidapi.com/",
    headers:{
      'X-RapidAPI-Key': process.env.REACT_APP_RAPID_API_KEY,
      'X-RapidAPI-Host': process.env.REACT_APP_RAPID_API_HOST
    }
  })
  

Vite

• 环境变量必须以VITE_为前缀，修改.env文件：

  VITE_RAPID_API_KEY=你的实际密钥
  VITE_RAPID_API_HOST=twitch-game-popularity.p.rapidapi.com
  

• 代码中通过import.meta.env访问：

  import axios from "axios";
  
  export default axios.create({
    baseURL: "https://twitch-game-popularity.p.rapidapi.com/",
    headers:{
      'X-RapidAPI-Key': import.meta.env.VITE_RAPID_API_KEY,
      'X-RapidAPI-Host': import.meta.env.VITE_RAPID_API_HOST
    }
  })
  

额外注意事项 #

• .env文件不要提交到版本库，确保.gitignore里包含.env条目。
• 修改.env文件后，需要重启开发服务器才能生效。

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