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

问：

我有一个 React 项目，我想在其中获取天气 API。当我在没有将它们存储在变量中的情况下使用 API 时，它会起作用，如果我将它们放在 dotenv 中并使用它，它会给我一条错误消息，指出 API 密钥已禁用。import.meta.env.VITE_API_KEY;

这是我的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