Vue3(Vite) 安装 Cesium

1. 安装Cesium：

npm i cesium vite-plugin-cesium vite -D
# yarn add cesium vite-plugin-cesium vite -D

安装完后，可以看到已经自动安装了Cesium包：

也可以重新安装其他版本的Cesium包，不同版本的写法都有差异，根据自身情况而定，我这里重新安装的是cesium@1.95.0版本的：

2.  配置 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';

export default defineConfig({
  plugins: [
    vue(),
    cesium()
  ],
})

3. Vue中初始化：

<template>
    <div id="cesiumViewer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';

let viewer = null;

onMounted(() => {
    initCesium();
})

//初始化
const initCesium = () => {
    Cesium.Ion.defaultAccessToken = 'eyJ0...'; // 自己创建的token
    viewer = new Cesium.Viewer('cesiumViewer',{
        infoBox: false, // 禁用沙箱，解决控制台报错
        animation: false, // 是否创建动画小器件，左下角仪表
        baseLayerPicker: false, // 是否显示图层选择器
        fullscreenButton: false, // 是否显示全屏按钮
        geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
        homeButton: false, // 是否显示Home按钮
        infoBox: false, // 是否显示信息框
        sceneModePicker: false, // 是否显示3D/2D选择器
        selectionIndicator: false, // 是否显示选取指示器组件
        timeline: false, // 是否显示时间轴
        navigationHelpButton: false, // 是否显示右上角的帮助按钮
        navigationInstructionsInitiallyVisible: false,  //是否显示帮助信息控件
        showRenderLoopErrors: false, // 是否显示渲染错误
        // 设置背景透明
        orderIndependentTranslucency: false,                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
        shouldAnimate: true, //执行模型动画
        terrainProvider: Cesium.createWorldTerrain(), //地形 
    });

    viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏logo
    viewer.scene.globe.enableLighting = true;   //启用使用场景光源照亮地球
    viewer.scene.globe.depthTestAgainstTerrain = true;  //启用深度测试
}
</script>

<style lang="less" scoped>
</style>

其中 defaultAccessToken 的申请，创建的选项默认勾选就可以：

创建 Cesium 的 tokenhttps://ion.cesium.com/tokens?page=1