生产环境下Leaflet Marker不显示问题求助

一、先处理自定义图标current.png的路径问题 #

Parcel会对静态资源做打包处理，直接写相对路径'current.png'在生产环境会找不到文件，有两种简单的解决方式：

方式1：通过import导入图标文件

在你的JS脚本顶部导入图标（路径要和文件实际位置对应，比如图标和JS文件同目录就写./current.png）：

import currentIcon from './current.png';

然后修改L.icon配置，用导入后的变量作为iconUrl：

const initIcon = L.icon({
  iconUrl: currentIcon,
  iconSize: [80, 80],
  iconAnchor: [8, 8],
});

方式2：利用Parcel的public目录

1. 在项目根目录新建public文件夹，把current.png放进去
2. 修改iconUrl为根路径指向：

const initIcon = L.icon({
  iconUrl: '/current.png',
  iconSize: [80, 80],
  iconAnchor: [8, 8],
});

Parcel会自动把public文件夹里的文件原封不动复制到打包后的dist目录，路径不会改变，生产环境就能正确访问到图标。

二、解决本地引入Leaflet CSS报错的问题 #

你之前直接下载CSS本地引入出现入口点错误，是Parcel打包逻辑导致的，换成本地安装Leaflet包的方式就能解决：

1. 先通过npm安装Leaflet：

npm install leaflet

2. 在你的JS脚本顶部导入Leaflet的CSS和核心库：

import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

3. 删除HTML里的CDN链接（包括link和script标签）
   这种方式下，Parcel会自动处理Leaflet自带的所有资源（包括默认Marker图标），不会出现路径问题，且打包后不依赖外部CDN，稳定性更高。

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