React-js中的环境变量

Posted 2021-03-28

在我的项目中有一个环境变量

process.env.GOOGLE_MAPS_API

哪个谷歌API密钥并使用它来渲染地图，并具有以下代码不起作用：

export default GoogleApiWrapper({
  apiKey: (process.env.GOOGLE_MAPS_API)
})(MapContainer)

但是当我直接使用api键时，它会渲染地图

export default GoogleApiWrapper({
      apiKey: ('AI************************')
 })(MapContainer)

如何在上面的代码中使用google api密钥作为环境变量？

答案

如果您使用Webpack捆绑代码，则有DefinePlugin示例代码 -

// webpack.config.js
    new webpack.DefinePlugin({
  GOOGLE_MAPS_API: JSON.stringify(process.env.GOOGLE_MAPS_API)
})

app.js

console.log(GOOGLE_MAPS_API); // logs API_KEY