axios 在我的Vite/React项目中,我在为我的Openweather API密钥实现环境变量时遇到了麻烦

uoifb46i  于 2023-04-30  发布在  iOS
关注(0)|答案(1)|浏览(108)

我在项目的根文件夹中有一个.env文件。我检查了API密钥,它是正确的,我在URL中使用了实际的密钥而不是process.env.API_KEY,它正确地获取了数据
我正在使用VITE,在我的server.js文件中,我有这样一行:

const apiKey = process.env.API_KEY;

这是我获取数据的函数:

const apiKey = import.meta.env.VITE_API_KEY;
const getData = (city) => {
    if (!city) return;
    const apiURL =
      "https://api.openweathermap.org/data/2.5/weather?q=" +
      city +
      "&units=metric&appid=" +
      apiKey;
    axios
      .get(apiURL)
      .then((res) => {
        console.log("Response: ", res.data);
        setData(res.data);
      })
      .catch((err) => {
        console.log("Error: ", err);
      });
  };

我试图在天气组件中实现环境变量,以隐藏API密钥。我想使用API密钥从.env文件中获取天气详细信息。

piok6c0g

piok6c0g1#

您可以尝试使用import.meta.env.<YOUR_API_KEY>
请参阅此,https://vitejs.dev/guide/env-and-mode.html
希望有帮助

相关问题