ol 6.9.0 遵循官方打包教程无法生成可用production bundle问题

问题1：开发服务端口与教程标注不一致 #

这属于正常差异，你使用的项目脚手架/打包工具和官方教程默认采用的工具不同，端口就会不同，只要本地开发服务启动后能正常访问、地图功能运行正常，不需要强制对齐教程的1234端口。
如果需要手动修改为1234端口，根据你使用的工具调整配置即可：

• Parcel：启动命令后加参数 --port 1234
• Vite：在vite.config.js中配置 server: { port: 1234 }
• Webpack：在devServer配置项中修改port属性为1234

问题2：执行npm run build后生产包无法正常运行 #

按以下优先级排查：

1. 确认build命令配置正确，入口文件路径无误。比如用Parcel构建时命令应为 parcel build 你的入口文件路径（如src/index.html）
2. 确认代码中已经完整引入OpenLayers样式：必须存在 import 'ol/ol.css' 语句，漏引样式会导致生产环境地图组件完全错乱不可用
3. 调整静态资源路径配置：如果打包后需要部署在子目录而非域名根路径，需要给打包工具配置publicPath/base参数，比如Parcel构建时加 --public-url ./ 配置相对路径
4. 排查硬编码的开发环境地址：检查代码中是否写死了http://localhost:3000这类仅开发环境生效的资源地址，替换为相对路径或生产环境对应地址
5. 本地验证生产包：全局安装serve工具后，进入打包生成的dist目录执行 serve . 启动本地静态服务，打开浏览器控制台查看具体报错信息，再针对报错排查依赖缺失、语法兼容等问题

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