React Leaflet图标在Vite构建部署Firebase后无法显示

问题根源 #

本地npm run dev正常是因为Vite开发服务器能正确解析leaflet/dist/images下的资源路径，但打包部署后，Vite的资源哈希处理+Firebase Hosting的静态资源规则，导致默认图标路径无法被正确识别。

方案1：手动复制图标到Public目录（最简单） #

• 从node_modules/leaflet/dist/images中复制marker-icon.png、marker-icon-2x.png、marker-shadow.png三个文件到项目的public/images目录（没有就新建）
• 修改图标配置的路径为根路径引用：

const icon = L.icon({
  iconRetinaUrl: '/images/marker-icon-2x.png',
  iconUrl: '/images/marker-icon.png',
  shadowUrl: '/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
});

• 删掉原来的图标导入语句：

// 删除这三行
// import iconMarker from "leaflet/dist/images/marker-icon.png";
// import iconRetina from "leaflet/dist/images/marker-icon-2x.png";
// import iconShadow from "leaflet/dist/images/marker-shadow.png";

方案2：Vite构建时自动复制图标 #

• 在项目根目录的vite.config.js（或vite.config.ts）中添加构建钩子，自动复制图标到打包目录：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import { mkdirSync, copyFileSync } from 'fs';

export default defineConfig({
  plugins: [
    react(),
    {
      name: 'copy-leaflet-icons',
      buildStart() {
        const srcDir = path.resolve(__dirname, 'node_modules/leaflet/dist/images');
        const destDir = path.resolve(__dirname, 'dist/images');
        mkdirSync(destDir, { recursive: true });
        // 复制三个图标文件
        copyFileSync(`${srcDir}/marker-icon.png`, `${destDir}/marker-icon.png`);
        copyFileSync(`${srcDir}/marker-icon-2x.png`, `${destDir}/marker-icon-2x.png`);
        copyFileSync(`${srcDir}/marker-shadow.png`, `${destDir}/marker-shadow.png`);
      }
    }
  ]
});

• 图标配置和方案1一致，用根路径引用即可。

方案3：使用自定义本地图标（彻底规避路径问题） #

• 把图标文件放到项目的src/assets目录下（可以自己下载Leaflet图标或用自定义图标）
• 直接导入本地图标并配置：

import iconMarker from './assets/marker-icon.png';
import iconRetina from './assets/marker-icon-2x.png';
import iconShadow from './assets/marker-shadow.png';

const icon = L.icon({
  iconRetinaUrl: iconRetina,
  iconUrl: iconMarker,
  shadowUrl: iconShadow,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
});

• Vite会自动处理这些本地资源，打包后生成带哈希的正确路径，部署到Firebase后不会出现加载问题。

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