使用Vite在React中加载环境变量

Question

我有一个 React 项目，我想在其中获取天气 API。当我使用 API 而不将它们存储在变量中时，它可以工作，但如果我将它们放入 dotenv 并使用

import.meta.env.VITE_API_KEY;

，它会给我一条错误消息，表明 API 密钥已禁用。

这是我的 React 代码：

import React from 'react';
import dotenv from 'dotenv';

// dotenv.config()

const apiKey = import.meta.env.VITE_API_KEY;

const myHeaders = new Headers();
myHeaders.append("Key", apiKey);

const requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

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

这是我的环境：

VITE_API_KEY=XXX

Answer 1

我已经解决了。我犯的错误是将我的 env 文件放在我的 src 文件夹中。我删除了它并在 src 文件夹之外创建了一个新的 env 文件，它成功了。