将API密钥存储在.env文件中

2 年 ago
科, 颖
1 minute

首先

在我苦思冥想应该把API密钥写在哪里时，我查阅的结果记录。

请问有什么问题吗？

直接在源代码中写API密钥（随便写）可能不太好，那么该怎么办呢？

useEffect(() => {
        const access_weather = async () => {
            const response = await fetch(
                'https://api.openweathermap.org/APIKEY=129ahdfa8p3917ga8891d'
            )
            const body = await response.json()
            console.log(body)
        }
        return () => {
            access_weather()
        }
    }, [])

解决方案 (jiě jué àn)

在根目录下创建一个.env文件，与”.gitignore”等文件位于同一层次结构中。

如果在Vite上创建React项目

听说需要在头上戴上VITE_

VITE_WEATHER_API_KEY=129ahdfa8p3917ga8891d

只需要一种选项，用中文来转述以下代码可以访问。

console.log(import.meta.env.VITE_WEATHER_API_KEY)

如果使用create-react-app创建了React项目

好像必须在头部加上“REACT_APP_”才行。

REACT_APP_WEATHER_API_KEY=129ahdfa8p3917ga8891d

只需要一种选择，以下代码可以访问

console.log(process.env.REACT_APP_WEATHER_API_KEY)

请注意

如果将此代码上传到GitHub上，需要在.gitignore文件中添加对.env文件的记录。

*.env

总之

据说只有在开发环境下才能访问的.env.development文件，也有一种只有在生产环境下才能访问的.env.production文件。关于如何使用它们，我不太清楚。

.env 可能是 .environment 的缩写，意思应该是环境变量。

请参考

 

bannerAds