从.env文件导入API密钥时不起作用，但直接使用时可以

Question

我已经用Vite开始了我的项目。
当我直接在代码中使用我的API密钥而不是从.env文件中导入它时，它可以正常工作。但是当我像这样使用它时，我在控制台上得到了下面的错误。
{status_code: 7, status_message: 'Invalid API key: You must be granted a valid key.', success: false}

以下是我的代码

const apiKey = import.meta.env.REACT_APP_API_KEY;
const getMovies = () => {
    fetch(`https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}`)
      .then((res) => res.json())
      .then((json) => console.log(json))
      .catch((err) => console.log(err));
  };
  useEffect(() => {
    return () => {
      getMovies();
    };
  }, []);

注：把API密钥声明为VITE_REACT_API_KEY，并用import.meta.env.VITE_REACT_APP_API_KEY来使用，就解决了我的问题。

gsm2009 · Answer

你似乎是想用import.meta.env.REACT_APP_API_KEY来从.env文件中获取环境变量。但是根据Vite的文档，只有以VITE开头的环境变量才会暴露给你的Vite处理过的代码。要访问你的API密钥，你应该在你的.env文件中给它加上VITE的前缀，然后用import.meta.env.VITE_REACT_APP_API_KEY来访问它。例如，在你的.env文件中，你应该有类似这样的内容：

VITE_REACT_APP_API_KEY=your_api_key

然后在你的代码中，你可以像这样使用它：

const apiKey = import.meta.env.VITE_REACT_APP_API_KEY;

gsm2009 · Answer

在.env文件中的变量名应该以REACT_APP开头。比如：REACT_APP_API_KEY = 1234。在你的应用中使用这个变量时，你不应该导入它。而是应该像这样使用它：process.env.REACT_APP_API_KEY。
例如：{process.env.REACT_APP_API_KEY}

gsm2009 · Answer

你收到的错误信息“无效的API密钥：你必须获得一个有效的密钥”，表明从你的环境变量中读取API密钥可能存在一些问题。你提供的从.env文件中读取API密钥的代码看起来是正确的，但是可能有一些原因导致它没有按预期工作。

你可以按照以下步骤进行排查：

检查.env文件：首先，确保你的.env文件配置正确，并且包含了正确的API密钥值的REACT_APP_API_KEY变量。
重启开发服务器：在修改了你的.env文件后，你应该重启你的开发服务器，以确保变化被应用。
确保.env变量以REACT_APP开头：React应用中的环境变量必须以REACT_APP开头。确保你的.env变量名为REACT_APP_API_KEY。
检查拼写或多余的空格：确保你的API密钥或.env文件中的变量名没有拼写错误或多余的空格。
验证.env是否在根目录：.env文件应该位于你的React项目的根目录下。
安全性：再次检查你的API密钥是否正确且没有改变。有时，API提供商可能会重新生成密钥，这会使旧的密钥失效。
React Scripts版本：确保你使用的是支持在.env文件中使用环境变量的react-scripts版本。较新的create-react-app和react-scripts对环境变量有更好的支持。

打包器缓存：有时，打包器可能会缓存环境变量。尝试通过运行以下命令来清除你的项目的构建缓存：

npm start -- --reset-cache

浏览器缓存：清除你的浏览器缓存并尝试重新加载网页应用。

本地测试：尝试将apiKey变量打印到控制台，以确保它正确地从环境变量中读取。例如：

console.log(apiKey);

验证控制台是否显示了正确的API密钥。

如果你已经检查了上述所有内容，但仍然遇到问题，可能是你的开发环境或设置有特定的问题。在这种情况下，考虑寻求一个熟悉你的开发环境的同事或开发者的帮助，来协助你调试问题。

gsm2009 · Answer

我也遇到了同样的问题，原来是在.env文件中，我用逗号分隔了所有的变量，这是一个错误。
不要使用任何分隔符，只需这样做

KEY = 'value'
KEY2 = 'value2'