Openlayers 6.9.0 按官方教程操作无法生成可用的生产环境打包产物

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

该差异是打包工具端口占用或默认配置不同导致的，不影响核心功能，可按需调整：

• 若使用教程默认的Parcel打包工具，可在package.json的scripts字段中修改dev命令，追加端口参数强制指定为1234：

  "dev": "parcel src/index.html --port 1234"
  

• 若自行替换为Vite等其他打包工具，3000为默认端口，无需强制调整，只要开发环境功能正常即可。

npm run build生产包故障修复方案 #

按优先级排查以下常见问题：

• 静态资源引用路径错误：大部分生产包白屏/功能异常都是该原因导致。使用Parcel打包时，在build命令中追加公共路径参数：

  "build": "parcel build src/index.html --public-url ./"
  

  若使用Vite，在vite.config.js中配置base: './'即可。
• OpenLayers样式缺失：检查入口JS文件是否全局引入了OpenLayers的样式文件，确保存在以下引入代码：

  import 'ol/ol.css'
  

• 依赖版本不匹配：若本地安装的OpenLayers版本与教程版本不一致，接口差异会导致打包后报错，执行以下命令升级到最新正式版后重新打包即可：

  npm install ol@latest
  

打包结果验证 #

打包完成后不要直接打开本地html文件（会触发跨域限制导致功能异常），执行npx serve dist命令启动dist目录的静态服务，访问对应端口验证功能是否正常即可。

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