[cesium] vue3 安装cesium方法

引入方式一：npm安装的方式

1. npm 安装

npm install --save cesium
npm i vite-plugin-cesium

注意不同版本的cesium语法是有差别的，所以要参考对应版本的API进行开发

2. 配置vite.coinfig.ts
   看这个博客

3. 在 main.js 中导入 Cesium 的样式文件：

   import 'cesium/Build/Cesium/Widgets/widgets.css';
   

4. 使用

   <template><div class="cesium"><div class="cesium-container" id="cesiumMap"></div></div>
   </template><script setup lang="ts">
   import { onMounted } from 'vue'
   import * as Cesium from 'cesium'onMounted(() => {const viewer: Cesium.Viewer = new Cesium.Viewer('cesiumMap')console.log('👉 ~ onMounted ~ viewer:', viewer)
   })
   </script>
   

引入方式二：HTML中标签引入方式<script>和<link>

适用于1.90以上所有版本

1. 下载指定库文件，Cesium的GitHub地址如下
   Cesium文件下载地址
   

2. 解压文件后将Build的文件夹下的Cesium文件夹拷贝到vue项目中public文件加下，如下图所示
   

3. 在index.html中引入js和css文件

   <link href="./Cesium/Widgets/widgets.css" rel="stylesheet">   
   <script src="./Cesium/Cesium.js"></script>
   

4. 在vue文件中加载cesium

引入方式三：npm安装，node_modules下cesium文件放在public下

1. npm 安装cesium

2. 将node_modules/cesium/Build/Cesium文件夹拷贝到vue项目中public文件加下，如下图所示录下
   
   

3. vue文件中引入cesium

   import * as Cesium from 'cesium
   window.CESIUM_BASE_URL = '/cesium'
   

参考：

掘金+CSDN上主流vue（vuecli）引入cesium方式的总结和梳理