Vue SPA迁移NuxtJS时Leaflet报window未定义的解决方法

核心方案：仅在客户端环境按需加载依赖 #

所有依赖浏览器window对象的库（Leaflet、Bootstrap组件等）必须等到组件在客户端挂载后再加载，避免SSR阶段执行时触发环境不兼容报错。

具体实现步骤 #

1. 移除顶部静态import，改用客户端动态导入
   把原来的静态import全部移到mounted钩子中，使用动态import()语法加载依赖，确保代码仅在客户端执行。

2. 声明变量存储Leaflet实例
   在组件data中声明L变量，用于存储加载后的Leaflet对象，避免作用域问题。

3. 按需初始化Bootstrap组件
   Bootstrap的Tooltip、Carousel同样依赖浏览器环境，需在客户端挂载完成后再初始化。

完整代码示例（选项式API） #

<template>
  <!-- 你的组件模板 -->
  <div ref="mapContainer"></div>
</template>

<script>
export default {
  name: 'carte',
  props: ['gps'],
  components: {
    // 若GChart依赖window，同样用动态导入加载
    GChart: () => import('vue-google-charts').then(m => m.GChart)
  },
  data() {
    return {
      L: null, // 存储Leaflet实例
      map: null
    }
  },
  async mounted() {
    // 并行加载所有依赖库
    const [leafletModule] = await Promise.all([
      import('leaflet'),
      import('@geoman-io/leaflet-geoman-free'),
      import('leaflet.markercluster'),
      import('leaflet-fullscreen'),
      import('leaflet-sidebar'),
      import('leaflet.vectorgrid')
    ])
    this.L = leafletModule.default

    // 动态加载对应CSS文件
    await Promise.all([
      import('leaflet/dist/leaflet.css'),
      import('@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'),
      import('leaflet.markercluster/dist/MarkerCluster.css'),
      import('leaflet.markercluster/dist/MarkerCluster.Default.css'),
      import('leaflet-fullscreen/dist/leaflet.fullscreen.css'),
      import('leaflet-sidebar/src/L.Control.Sidebar.css')
    ])

    // 初始化Leaflet地图
    this.map = this.L.map(this.$refs.mapContainer).setView([51.505, -0.09], 13)
    this.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map)

    // 初始化Bootstrap交互组件
    const { Tooltip, Carousel } = await import('bootstrap')
    Tooltip.init(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    Carousel.init(document.querySelectorAll('.carousel'))
  },
  beforeUnmount() {
    // 组件卸载时销毁地图，避免内存泄漏
    if (this.map) {
      this.map.remove()
    }
  }
}
</script>

关键说明 #

• 动态import()：返回Promise，确保依赖加载完成后再执行初始化逻辑，同时避免SSR阶段解析这些依赖代码。
• Promise.all()：并行加载多个依赖，提升整体加载效率。
• CSS动态加载：部分Leaflet插件的样式不会自动导入，需手动加载保证界面正常显示。
• 卸载清理：在beforeUnmount中销毁Leaflet地图，防止长期运行产生内存泄漏。

内容的提问来源于stack exchange，提问作者Sam85