Vite项目中REACT_APP_API_KEY读取为undefined问题求助

问题场景 #

在Vite创建的React项目中，设置REACT_APP_API_KEY环境变量后，通过import.meta.env.REACT_APP_API_KEY读取始终得到undefined，尝试将.env文件放在src目录内外均无效，需要正常读取到字符串格式的API密钥。

组件代码 #

import { useEffect, useState } from "react";
import brick from "./assets/tamland.webp";
import BrickSays from "./BrickSays";
import { location } from "./helper";

const APP_KEY = import.meta.env.REACT_APP_API_KEY;
console.log(APP_KEY);

const WeatherData = () => {
  const weatherStackAPI = `http://api.weatherstack.com/current?access_key=${APP_KEY}&query=${location}`;
  console.log(weatherStackAPI);

  const [apiResponse, setResponse] = useState<unknown>();

  const fetchWeather = async () => {
    const promise: Response = await fetch(weatherStackAPI);
    const rawData: any = await promise.json();
    setResponse(rawData);
    console.log(rawData);
  };

  useEffect(() => {
    fetchWeather();
  }, []);

  console.log(apiResponse);

  return (
    <>
      <BrickSays />
      <img src={brick} alt='I love lamp' height='500px' />
    </>
  );
};

export default WeatherData;

.env文件内容 #

REACT_APP_API_KEY = appkey

解决步骤 #

1. 修改环境变量命名规则
   Vite不使用Create React App的REACT_APP_前缀，要求可被客户端访问的环境变量必须以VITE_开头。将.env文件中的变量名改为：

VITE_APP_API_KEY=appkey

注意：变量名和值之间不要加空格，否则会导致读取到带空格的无效值。

2. 调整代码中的读取方式
   将组件中的环境变量读取代码修改为：

const APP_KEY = import.meta.env.VITE_APP_API_KEY;

3. 确保.env文件位置正确
   .env文件必须放在项目根目录（与package.json同级），不要放在src文件夹内。

4. 重启开发服务器
   修改.env文件后，需要重启Vite开发服务器，环境变量才会生效。

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