如何解决.env文件中的mapbox accessToken
我设置了一个新的create-my-app并将此基本示例添加为App组件:
https://www.apple.com/ca/
https://www.facebook.com/ca/
https://www.utorrent.com/ca/
在运行时,它给出了一个错误,因为我还没有给出令牌。我读到可以将它作为道具传递给App。因此,在索引文件中,我尝试了以下方法:
import {Component} from 'react';
import ReactMapGL from 'react-map-gl';
class App extends Component {
state = {
viewport: {
width: 400,height: 400,latitude: 37.7577,longitude: -122.4376,zoom: 8
}
};
render() {
return (
<ReactMapGL
{...this.state.viewport}
onViewportChange={(viewport) => this.setState({viewport})}
/>
);
}
}
,但是它仍然给出相同的错误。如何使用.env文件添加accessToken,我应该在其中写什么?
解决方法
要将Mapbox令牌公开为Create React App的环境变量:
- 在项目的根目录中创建一个名为
.env
的文件 - 定义环境变量以存储Mapbox令牌,例如
REACT_APP_MAPBOX_TOKEN
注意:您必须创建以REACT_APP_
(details)开头的自定义环境变量
创建后,它将在您的JS中显示为process.env.REACT_APP_MAPBOX_TOKEN
,例如:
<ReactMapGL
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
{...this.state.viewport}
onViewportChange={(viewport) => this.setState({ viewport })}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。