env变量不适用于谷歌地图

Question

我正在创建一个带有create-react-app的React应用程序，并试图将一些API密钥存储在.env文件中，但在尝试访问它们时遇到了问题。

这是.env文件的结构：

REACT_APP_GOOGLE_MAPS_API_KEY = apiKeyValue

正如你所看到的，API密钥是用于谷歌地图的，这里是我使用地图的组件：

export default function MapReturner() {
const { isLoaded } = useLoadScript({
googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY
});
if(!isLoaded) return <div>Loading...</div>
return <Map />
};

但我得到了这个错误：

谷歌地图JavaScript API警告：NoApiKeys

这是因为当我尝试console.log()密钥时，通过process.env.REACT_APP_GOOGLE_MAPS_API_KEY访问它，浏览器控制台会返回undefined。

p.S：我的.env文件在src文件夹之外的root目录中，并且我安装了dotenv。

Answer 1

确保每个变量都有REACT_APP前缀，并且值不需要包装在引号中，还确保在更改.env后运行npm启动

此外，如果您要在后端使用它，您需要使用dotenv并运行它。像这样的dotenv.config((：

require(“dotenv”).config();