最近在公司做项目时,有看到周围的前端开发同时遇到Vue引入Cesium搭建项目时遇到问题的,因此,就自己尝试了一番。以下使用webpack5引入Cesium.js,介绍如何在webpack项目中引入Cesium.js时,并将遇到的问题简单罗列,给出解决方案。Vue项目中也是同理,完整示例代码可访问gitee项目:webpack-cesium。
1. 搭建项目框架
使用webpack、webpack-cli搭建基本的项目骨架,主要是:
①引入css-loader、style-loader,用于处理CSS文件;
②引入html-webpack-plugin,自动构建index.html主页文件;
③引入webpack-dev-server,搭建本地服务器,实现动态修改和实时打包;
以上步骤可以参考:《webpack:两小时极速入门》。
2.引入Cesium.js
①引入Cesium.js开发包资源的命令如下,
npm i cesium -S