环境

• NodeJS：v16.20.0
• "vue": "^3.2.47",
• "cesium": "^1.106.1",
• "@types/cesium": "^1.70.0",
• "vite-plugin-cesium": "^1.2.22",

配置步骤

安装相关依赖

npm install Cesium
npm install @types/cesium
npm i vite-plugin-cesium -D

配置 vue.config.js 文件

vite插件中添加

// vite.config.js  
import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [cesium()]
});

页面引用

// App.vue
<template\>
  <div id="cesiumContainer"></div\>
</template\>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(()=>{
  const viewer = new Cesium.Viewer('cesiumContainer',{
    animation: true, // 动画小组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: false, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  }
})
</script\>

<style>
html,
body,
#app,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style\>