在Vite搭建的React项目中加载环境变量调用API遇错

云上老周

2026-7-8

问题分析

直接硬编码API密钥时请求正常，但通过import.meta.env.VITE_API_KEY读取.env中的密钥却触发「API Key is disabled」错误，核心原因是环境变量未正确加载，导致传递给API的密钥为空或无效值（并非密钥本身被禁用）。

解决步骤

移除多余的dotenv依赖与代码
Vite内置环境变量处理机制，不需要手动引入dotenv包。直接删除代码中的以下内容：

import dotenv from 'dotenv';
// dotenv.config()

确认.env文件的位置与格式

.env必须放在项目根目录（与package.json同级），不能放在src等子目录下；
变量值不要加引号，保持VITE_API_KEY=XXX的格式（引号会被当作密钥的一部分）；
检查变量名拼写，必须严格以VITE_开头，大小写完全一致。

重启开发服务器
Vite仅在启动时加载.env文件，修改.env后必须重启npm run dev，否则新变量不会生效。
验证变量是否正确读取
在代码中添加日志，确认密钥是否被正确获取：

console.log('Loaded API Key:', import.meta.env.VITE_API_KEY);

如果输出undefined或空字符串，说明.env加载失败，重新检查上述步骤。

修正API请求方式
根据weatherapi的文档规范，密钥应通过URL参数传递，无需在请求头中重复添加。移除Headers中的Key配置，简化请求代码：

import React from 'react';

const apiKey = import.meta.env.VITE_API_KEY;
console.log('Loaded API Key:', apiKey);

fetch(`http://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=Jos&days=5`, {
  method: 'GET',
  redirect: 'follow'
})
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));