最近在研究Cesium，尝试把Cesium引入到vite+vue框架中。
vue+vite初始化项目这里不多做概述，需要搭建步骤的可以看我往期的文章。
通过vite从0-1搭建一个vue-ts项目_pnpm create vite-CSDN博客
搭建完vue项目后，我们需要先去cesium管网去注册一个token，用于访问cesium地图资源。
Cesium官网
根据步骤注册token即可。
前期准备完成后正式开始引入Cesium。
一、安装Cesium
pnpm install cesium@1.118.2看有人说安装Cesium最好安装1.118.2版本，否则会有不可控的bug。如果下载报错，那么可以检查一下node版本，需要大于18版本，版本过低请升级然后重新安装cesium
二、配置Cesium
cesium不像其他一些第三方库，下载之后可以直接在页面中引入；cesium渲染需要用到一些静态资源的路径。但是呢在vite中已经有相关的插件解决导入静态资源的问题，我们只需要下载使用就可以省略引入静态文件这一步了。
pnpm install vite-plugin-cesium下载完成后，需要在vite.config.ts中配置以下内容。
import cesium from 'vite-plugin-cesium'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),cesium(),//...],
})三、引入Cesium
cesium的使用和高德、百度地图类似，需要一个容器来承载该对象。
以下代码是完整的引入代码。
<template><div id="cesium_container"></div>
</template><script setup>
import * as Cesium from 'cesium'
import {Ion,Terrain,Viewer} from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'let viewer = null
onMounted(()=>{initMap()
})
const initMap = async ()=>{Ion.defaultAccessToken = '申请的token'viewer = new Viewer('cesium_container',{terrain: Terrain.fromWorldTerrain(),})
}
</script><style lang="less" scoped>
#cesium_container{width: 100%;height: 100%;
}
:deep(.cesium-viewer-bottom){display: none;
}
</style>运行项目，可以发现成功渲染出地球了，说明已经成功引入了Cesium
