Vue3使用leaflet-draw提示Leaflet版本不匹配问题求助

问题根源 #

你项目中安装的leaflet-css@0.1.0包内部固定依赖Leaflet 0.6.4版本，leaflet-draw加载时优先读取到了这个旧版本的Leaflet实例，所以出现版本校验不匹配的报错。同时Leaflet 1.x版本本身已经内置了样式文件，完全不需要单独安装leaflet-css依赖，额外安装反而会造成版本冲突。

解决方案 #

按以下步骤操作即可解决：

1. 卸载冲突依赖
   执行命令删除多余的leaflet-css包：

npm uninstall leaflet-css

删除完成后清空node_modules和包管理工具缓存，重新安装所有依赖。

2. 配置打包别名锁定Leaflet版本
   在项目根目录的vue.config.js中添加如下配置，强制所有依赖加载你安装的1.7.1版本Leaflet，避免leaflet-draw调用自身内部嵌套的旧版本：

const path = require('path')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'leaflet': path.resolve(__dirname, 'node_modules/leaflet')
      }
    }
  }
}

3. 调整组件内引入方式
   修改单文件组件的引入逻辑，正确引入Leaflet、leaflet-draw及对应的样式文件：

<template>
    <div class="h-full flex-1" id="main-map"></div>
</template>

<script>
import L from 'leaflet'
// 将Leaflet实例挂载到全局，供leaflet-draw读取
window.L = L
// 引入leaflet-draw
import 'leaflet-draw'
// 引入必要样式
import 'leaflet/dist/leaflet.css'
import 'leaflet-draw/dist/leaflet.draw.css'
import { onMounted } from '@vue/runtime-core'
import DRAW_OPTIONS from './data/drawingOptions'


export default {
    setup() {
        onMounted(() => {
            let mymap = L.map('main-map').setView([51.505, -0.09], 10);
            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'attribution-here',
                maxZoom: 18,
                id: 'mapbox/streets-v11',
                tileSize: 512,
                zoomOffset: -1,
                accessToken: 'access-token-here'
            }).addTo(mymap);

            var drawControl = new L.Control.Draw(DRAW_OPTIONS)
            mymap.addControl(drawControl);              
        })

        return {
        }
    }
}
</script>

4. 重启开发服务
   配置完成后重启Vue开发服务，即可正常加载绘图控件。

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