Mapbox GL this.map.on('load') 事件在本地有效，但在我部署到 vercel 时无效答案

【问题标题】：Mapbox GL this.map.on('load') event works locally but not when i deploy to vercelMapbox GL this.map.on('load') 事件在本地有效，但在我部署到 vercel 时无效
【发布时间】：2021-11-19 23:46:35
【问题描述】：

我正在制作一个带有 mapbox 和 nuxt 的交互式地图，用于设置地图加载时某些图层的可见性。我还使用this.map.on('mousemove') 设置了一个queryRenderedFeatures 函数，如下所示：

export default {
  props: {
    map: {
      type: Object,
      required: true
    }
  },
  data: () => ({
    layerIds: ['Zip Code', 'Network'],
    zone: 'Zip Code'
  }),

  mounted () {
    this.map.on('load', () => { this.map.setLayoutProperty(this.layerIds[0], 'visibility', 'visible') })
    this.map.on('load', () => { this.map.setLayoutProperty(this.layerIds[1], 'visibility', 'none') })
    this.map.on('mousemove', (e) => {
      if( this.zone == 'Zip Code'){
        const features = this.map.queryRenderedFeatures(e.point)
...

现在，这一切都在我的地图组件的一个子组件的挂载钩子中被调用，并且当我部署到本地服务器时一切正常。但是，当我部署到 vercel 时，地图会在加载时显示两个图层，而不仅仅是第一个，并返回控制台错误：

TypeError: this.map.on is not a function
    at c.mounted (98d0728.js:1)
    at ii (b366f77.js:2)
    at vn (b366f77.js:2)
    at Object.insert (b366f77.js:2)
    at $ (b366f77.js:2)
    at zn.__patch__ (b366f77.js:2)
    at zn.t._update (b366f77.js:2)
    at zn.o (b366f77.js:2)
    at Tn.get (b366f77.js:2)
    at new Tn (b366f77.js:2)
ai @ b366f77.js:2
manifest.js:1 Failed to load resource: the server responded with a status of 404 ()

我发现一些线程表明 mapbox 与服务器端渲染不兼容，但我不确定这是问题所在，甚至在这一点上是真的。无论哪种方式，我尝试将 target: 'static' 行添加到我的 nuxt.config.js 并将 mapbox gl 导入重构为 mount 中的 const 到目前为止都没有成功。有谁知道是什么导致了这个错误？

【问题讨论】：

好吧，为您的target 在'static' 和'server' 之间切换不是一件事情。你需要决定你确实需要哪一个并坚持下去。 Vercel 只能提供静态文件，例如 CDN，也就是 target: 'static'。如果您想将渲染保留为服务器，请将其托管在 Heroku 或类似的东西上。另外，要仔细检查：当你构建你的应用程序时它是否在本地工作？
@kissu 谢谢你的回答，但我仍然很困惑，因为 Nuxt link 使“完全静态”看起来很简单：“将 nuxt 升级到 2.14.0，设置目标：' static' 在您的 nuxt.config.js 中，运行 nuxt generate，就是这样 ✨" 此外，Nuxt 团队和 Vercel 销售代表都认为 Vercel 适合 ssr。也许这是一个mapbox问题？他们的文档对此不太清楚。回答你的最后一个问题，不，npm run build, then start 产生与部署到 vercel 相同的结果。

标签： vue.js nuxt.js server-side-rendering mapbox-gl-js vercel

【解决方案1】：

通过合并我的嵌套 UI 组件及其父 mapbox 组件，并根据 Nuxt 的“完全静态”指南渲染应用程序，我能够消除这些错误。我确信有很多不同的方法可以解决这个问题，其中一些可能让我保留服务器端渲染，我想探索其他方法，比如为此目的使用 Nuxt 客户端插件，但这个解决方案对我有用因为无论如何，服务器端渲染在这里有点矫枉过正，而静态渲染也更快。

【讨论】：

如果你想保持静态，Vercel 确实是一个很好的解决方案。只是不要选择静态，因为在您的情况下它比服务器更好，但出于特定原因。
@kissu 完全明白了，谢谢。只是用我现在拥有的技能进行分类