React.js：为何从.env文件读取API密钥需REACT_APP前缀？

之前误以为在.env文件中定义的API密钥只要以REACT_APP为前缀，访问时就能省略前缀直接用process.env.YOUR_KEY_NAME，但实际并非如此。

在Create React App（CRA）构建的项目中，只有以REACT_APP_开头的环境变量才会被打包工具注入到客户端代码里，访问时必须完整使用带前缀的变量名，否则会返回undefined。

举个例子：

• .env文件配置：REACT_APP_YOUR_KEY_NAME=9999999999999
• 正确获取方式：process.env.REACT_APP_YOUR_KEY_NAME
• 错误获取方式：process.env.YOUR_KEY_NAME → 结果为undefined

以下是正确使用环境变量的代码示例：

const FetchData = async () => {
  try {
    const cache = localStorage.getItem('apiData');
    if (cache) {
      return JSON.parse(cache);
    } else {
      const response = await fetch(`${url}?key=${process.env.REACT_APP_API_KEY}`);
      const jsonData = await response.json();
      localStorage.setItem('gameData', JSON.stringify(jsonData));
      return jsonData;
    }
  } catch (error) {
    console.error('Error occurred:', error);
    return null;
  }
};

export default FetchData;

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