Vue项目集成vue-leaflet报错：TypeError读取Default未定义

这个错误通常由版本不兼容或Leaflet实例未正确注入导致，以下是针对性解决步骤：

1. 匹配兼容的依赖版本 #

@vue-leaflet/vue-leaflet和Leaflet有严格的版本对应关系：

• 若使用Vue3：安装Leaflet 1.9.x + @vue-leaflet/vue-leaflet 0.10.x
• 若使用Vue2：安装Leaflet 1.7.x + @vue-leaflet/vue-leaflet 0.8.x

执行对应卸载重装命令：

Vue3环境： #

npm uninstall leaflet @vue-leaflet/vue-leaflet
npm install leaflet@1.9.4 @vue-leaflet/vue-leaflet@0.10.1

Vue2环境： #

npm uninstall leaflet @vue-leaflet/vue-leaflet
npm install leaflet@1.7.1 @vue-leaflet/vue-leaflet@0.8.4

2. 显式注入Leaflet实例（Vue3可选但有效） #

在组件的setup函数中，手动将Leaflet实例绑定到vue-leaflet组件的props上，避免实例未被识别：
修改组件的script部分：

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet"; // 导入Leaflet核心库
import { LMap, LTileLayer, LMarker } from "@vue-leaflet/vue-leaflet";
import { ref } from "vue";

export default {
  name: "MapComponent",
  components: {
    LMap,
    LTileLayer,
    LMarker,
  },
  setup() {
    // 显式绑定Leaflet实例到组件props
    LMap.props.leaflet.default = () => L;
    LTileLayer.props.leaflet.default = () => L;
    LMarker.props.leaflet.default = () => L;

    const zoom = ref(2);
    const center = ref([47.41322, -1.219482]);
    const markerPosition = ref(null);
    const clickedLatLng = ref(null);

    const onMapClick = (e) => {
      clickedLatLng.value = e.latlng;
      markerPosition.value = e.latlng;
    };

    return {
      zoom,
      center,
      markerPosition,
      clickedLatLng,
      onMapClick,
    };
  },
};
</script>

3. 调整构建工具配置（针对Vite/Webpack） #

如果使用Vite，在vite.config.js中添加依赖优化，确保Leaflet被正确打包：

export default {
  optimizeDeps: {
    include: ["leaflet", "@vue-leaflet/vue-leaflet"],
  },
};

如果使用Webpack，检查配置文件，避免对Leaflet开启过度的tree-shaking，确保其完整模块被加载。

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