Vite/React项目中Openweather API密钥环境变量配置问题

1. 修正.env文件配置规则 #

Vite对前端环境变量有强制命名要求：必须以VITE_作为前缀。检查项目根目录下的.env文件，变量名需写成：

VITE_API_KEY=你的Openweather API密钥

注意：密钥值不要加引号，除非密钥本身包含空格或特殊字符。

2. 重启Vite开发服务器 #

Vite仅在启动时加载.env文件，修改.env后必须完全关闭并重新启动开发服务器，否则新的环境变量不会生效。

3. 验证组件变量读取有效性 #

在天气组件中添加调试代码，确认环境变量是否成功加载：

console.log(import.meta.env.VITE_API_KEY); // 查看控制台输出是否为你的API密钥

如果输出undefined，检查以下几点：

• .env文件是否放在项目根目录（与vite.config.js同级）
• 变量名拼写是否正确（大小写敏感，VITE_必须大写）

4. 处理server.js中的环境变量（如果是Node.js后端文件） #

若server.js是Node.js后端代码，Vite的前端环境变量不会自动注入到Node.js进程中。如果后端需要使用该密钥：

• 安装dotenv包：npm install dotenv --save
• 在server.js顶部添加：

  require('dotenv').config();
  const apiKey = process.env.VITE_API_KEY; // 变量名需与.env中保持一致
  

如果后端不需要调用Openweather API，可直接删除server.js中相关代码，避免混淆。

5. 确认API请求逻辑 #

你的getData函数逻辑本身无问题，待apiKey变量正常读取后，可打印拼接后的apiURL，检查appid参数是否正确携带密钥。

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