如何只阅读谷歌地图API关键在生产

Question

我正在开发一个使用谷歌地图的React应用程序。我一直只在开发模式下工作，现在我想在将其推向生产时添加API密钥。

我正在加载Google Maps脚本，就像下面的代码一样，它似乎可以工作，但我只想从我的.env中阅读并在生产中使用API密钥，而不是在本地开发时http://localhost:3000/等等。有人知道是否有简单的方法吗？

if (!scriptElementExists) {
// Create a new script tag
const scriptElement = createScriptElement(
'google-maps',
`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_KEY}&callback=${googleMapsData.scriptCallbackName}`
);
// Append the script to the document
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}

我的.env

# Google Maps Api Key
REACT_APP_GOOGLE_MAPS_KEY={{API_KEY}}

事先谢谢！

请问我是否说清楚了。

Answer 1

如果您正在使用Create React App，则可以使用process.env.NODE_ENV。自动设置为development或production。

https://create-react-app.dev/docs/adding-custom-environment-variables