Leaflet下载版1.9.4出现src/map/Map.js 404错误求解决
2026-7-13
Leaflet 1.9.4 本地运行出现 src/map/Map.js 404 错误
我尝试安装Leaflet简易下载版开发应用，但本地运行时控制台报错src/map/Map.js文件404，该路径本不应被脚本访问。我自行创建了index.html和index.js（代码如下），但在本地服务器无法正常运行，而在codesandbox.io上却能正常工作。另外建议官方附带可直接运行的示例文件，方便用户排查是服务器还是代码问题。
我的代码
index.html
<!DOCTYPE html> <html> <head> <title>Leaflet Test</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./leaflet.css" /> <script src="./leaflet.js" ></script> </head> <body> <div id="map"></div> <script src="./index.js"></script> </body> </html>
index.js
var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
问题原因及解决办法
这个404错误并非Leaflet 1.9.4的bug，大概率是你下载的源码包而非编译好的生产版本。Leaflet的源码包包含未编译的模块文件，直接引用会导致它尝试加载源码路径下的文件，而生产版本是打包好的单一文件，不会有这个问题。
解决步骤：
- 重新下载Leaflet的生产构建版本：前往Leaflet官网下载页面，选择下载
leaflet.zip（而非源码包）。 - 解压后将
leaflet.css、leaflet.js以及images文件夹放在你的项目根目录，和你的index.html、index.js同级。 - 给地图容器设置基础样式：在
index.html的<head>里添加样式，否则地图可能无法显示：
<style> #map { height: 100vh; width: 100vw; } </style>
- 确保你用本地服务器打开页面（比如用
python -m http.server、Live Server插件等），不要直接双击打开HTML文件。
内容的提问来源于stack exchange，提问作者Jojo Alias F
相关产品推荐
相关产品推荐
