Vite环境下React-Leaflet地图无法显示问题求助

在Vite构建的React项目中集成react-leaflet地图板块时，出现地图内容无法加载的问题，相同代码在Create React App环境可正常运行，推测问题源于Vite配置差异。已确认依赖安装完整、操作步骤符合文档要求，以下是可能的原因及解决方法：

组件代码 #

import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

const position = [40, 0];

export default function ContactLocation() {
  return (
    <section>
      <div className="container max-w-full h-[600px]">
        <MapContainer
          center={position}
          zoom={15}
          scrollWheelZoom={true}
          className="h-[80vh]"
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={position}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </section>
  );
}

当前Vite配置 #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import * as path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },
})

可能的原因及解决方法 #

• Leaflet图标资源路径解析错误：Vite的模块解析机制与CRA不同，Leaflet默认的图标路径会失效，导致地图标记无法加载甚至影响整体渲染
  解决：在组件中添加Leaflet图标路径配置：

  import L from 'leaflet';
  // 重置默认图标路径
  delete L.Icon.Default.prototype._getIconUrl;
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: new URL('leaflet/dist/images/marker-icon-2x.png', import.meta.url).href,
    iconUrl: new URL('leaflet/dist/images/marker-icon.png', import.meta.url).href,
    shadowUrl: new URL('leaflet/dist/images/marker-shadow.png', import.meta.url).href,
  });
  

• 全局CSS导入验证：尝试将import 'leaflet/dist/leaflet.css'移至项目入口文件（如main.jsx），确保CSS全局生效
• 别名冲突测试：暂时注释vite.config.js中的别名配置，验证是否因别名导致leaflet模块解析异常

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