Bootstrap

Cesium开发实战开篇—vite+cesium框架搭建

在Cesium开发基础篇幅中,我们聊过利用Vue cli搭建Vue2.x+Vesium的框架,但这种方式需要在vue.config.js文件中需要配置Cesium在Webpack中的相对路径和别名,用起来不是特别的方便。今天我们采用Vite直接与Cesium集成,无需任务配置,快速搭建基于Vue3.x+Cesium的开发框架。

Vite我们就不详细地进行介绍了,不了解的可进入其官网,这里直接上干货。但需要注意的是,Vite需要Node.js版本14.18+,16+,建议将Node升级成最新版本。Vite提供了众多的模版命令区创建前端工程,鉴于目前市面上Vue工程占主流,本文以Vue项目为例利用Vite和pnpm(安装pnpm请参上官方教程)构建项目。打开cmd命令,在指定的磁盘目录下执行如下命令:
pnpm create vite vite-cesium --template vue
创建和安装依赖包速度非常之快,这也是采用pnpm和vite的主要原因之一。Vite命令创建的工程会自动生成vite.config.js文件,来配置一些相关的参数,Vite和Vue cli的主要差别就是打包方面,通过Vite创建的前端工程采用的是rollup打包,而通过Vue Cli创建的前端工程采用的是Webpack打包,显而易见Vite占有很大优势。

下面我们聊聊Cesium的集成,首先用VS Code打开vite-cesium文件夹,在终端执行pnpm i cesium,和pnpm i vite-plugin-cesium -D,安装成功之后在vite.config.js文件引入如下代码:

import cesium from 'vite-plugin-cesium'; 
;