MapboxGL 无法在 NodeJS 生产环境中工作，但可以在开发环境中工作

Question

我在

index.js

中有此部分：

<ReactMapGL
    ref={this.map}
    className={classes.root}
    {...viewport}
    width="100%"
    height="100%"
    scrollZoom={isExpanded ? true : false}
    touchAction={isExpanded ? 'pan' : 'pan-y'}
    mapStyle={this.getMapStyle(homicides)}
    interactiveLayerIds={["homicides"]}
    getCursor={this.getCursor}
    onClick={this.handleClick}
    mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_API_ACCESS_TOKEN}
    onViewportChange={onViewportChange}
>

我的

.env

文件有这个：

REACT_APP_MAPBOX_API_ACCESS_TOKEN=pk.my-big-long-mapbox-api-token

当我在运行 Arch Linux 的本地计算机上运行

npm start

时，它会打开我的网络浏览器并导航到

http://localhost:3000/

，我可以看到地图。

但后来我将项目移至远程 Arch Linux 服务器。在远程服务器上，我运行

npm run build

，然后运行

serve -s build

，它告诉我转到

http://my-server-ip-address:3000

。我去了那里，但是地图没有显示。

在我的浏览器的开发控制台中，我看到了这个错误：

Uncaught Error: An API access token is required to use Mapbox GL. See https://docs.mapbox.com/api/overview/#access-tokens-and-token-scopes at e.RequestManager._makeAPIURL (mapbox.js:214:23) at e.RequestManager.normalizeSourceURL (mapbox.js:104:21) at R (load_tilejson.js:38:71) at Se.load (vector_tile_source.js:110:33) at Se.onAdd (vector_tile_source.js:146:14) at Jt.addSource (style.js:753:50) at Jt._load (style.js:311:18) at style.js:278:18

我已经跑了

npm update

。

这些 StackOverflow 问题的解决方案都没有帮助我：

• 如何解决使用 Mapbox GL JS 需要有效的 Mapbox 访问令牌？
• 错误：使用 Mapbox GL 需要 API 访问令牌

我还尝试将

{process.env.REACT_APP_MAPBOX_API_ACCESS_TOKEN}

替换为实际的 API 令牌字符串。当我运行

npm start

时，它可以在我的本地计算机上运行，但当我运行相同的命令时，它不能在我的远程服务器上运行。当我运行

npm start

并转到

http://my-server-ip-address:3000

时，地图也不起作用。

更新

在我的开发环境中——我的个人电脑，安装了

nginx

——我运行

npm run build

并将浏览器导航到

http://localhost/my-project/build/

。

页面加载后，我可以使用 Ctrl+Shift+C 打开浏览器的开发人员工具控制台，导航到“网络”部分，然后看到此 GET 请求：

https://api.mapbox.com/v4/mapbox.mapbox-streets-v7.json?secure&access_token=MAPBOX_API_ACCESS_TOKEN

。

但是当我在项目目录中运行

npm run build

，然后将浏览器导航到

http://my-server-ip-address/my-project/build

时，我在浏览器的开发控制台中看不到任何此类 GET 请求。

我看到的唯一与 Mapbox 相关的 GET 请求是这个：

https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js

。

Answer 1

我的发展

package.json

有

"react-map-gl": "^4.1.16"

。在生产中，是高于 7.0 的版本。

我在生产服务器中删除了

package-lock.json

，然后重新运行

npm install

和

npm run build

。