vue3 vite cesium

Vue3和Vite是一种常用的前端开发框架和构建工具，而Cesium是一个用于创建地球和其他虚拟环境的JavaScript库。在Vue3和Vite环境中引入Cesium可以通过以下步骤进行配置：

1. 首先，需要将第三方修改过的Cesium包引入到Vite框架下。这可以通过将Cesium包文件放置在项目的指定目录下来实现。例如，可以将Cesium官网提供的1.88版本的包文件放置在项目的Build/Cesium目录下\[1\]。

2. 在Vue3.x+Vite环境中搭建好项目后，需要在目标.vue文件中引入Cesium并使用。可以在目标.vue文件的script标签中使用import语句引入Cesium，并在onMounted钩子函数中创建Cesium的Viewer实例\[3\]。例如，在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', {
    infoBox: false, // 禁用沙箱，解决控制台报错
  });
})
</script>

<style scoped>
#cesiumContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

通过以上配置，就可以在Vue3和Vite环境中成功引入和使用Cesium库了\[2\]。
#### 引用[.reference_title]
- *1* *2* [Vue3.x +Vite引入第三方Cesium包的配置方法](https://blog.csdn.net/l491453302/article/details/122243252)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue+cesium配置系列——方式一：采用Vite3+cesium简单轻松配置webGIS前端开发环境](https://blog.csdn.net/weixin_41581756/article/details/126935289)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]