vue3 vite项目如何使用cesium?

在Vue 3和Vite的项目中使用Cesium，你需要遵循以下步骤：

初始化项目：首先，确保你的Vite和Vue 3项目已经初始化并且可以正常运行。
安装Cesium：通过npm或yarn安装Cesium库。你可以使用以下命令来安装：
```
npm install cesium
```
或者
```
yarn add cesium
```
安装vite-plugin-cesium：为了更好地在Vite中集成Cesium，你需要安装vite-plugin-cesium插件。使用以下命令安装：
```
npm install vite-plugin-cesium --save-dev
```
或者
```
yarn add vite-plugin-cesium --dev
```
配置vite.config.js：在你的vite.config.js文件中，引入并配置vite-plugin-cesium插件。这样可以确保Cesium能够正确地被Vite处理。配置可能如下所示：
```
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

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

配置样式和组件：你可能需要在项目的CSS文件中添加Cesium的样式，并在Vue组件中引入和使用Cesium。例如，在App.vue或其他组件中，你可以这样使用Cesium：

     <template>
       <div class="home" ref="cesiumContainer">
       </div>
     </template>
     
     <script>
     
     import {Viewer} from 'cesium'
     
     export default {
       data() {
         return {}
       },
       components: {},
       mounted() {
         new Viewer(this.$refs.cesiumContainer)
       },
       methods: {},
     }
     </script>
     
     <style lang="scss" scoped>
     .home {
       width: 100%;
       position: fixed;
       height: 100%;
       display: flex;
       justify-content: flex-start;
       align-items: flex-start;
       flex-wrap: nowrap;
       flex-direction: column;
       //background: #fff;
     }
 </style>

运行项目：完成以上步骤后，你可以运行你的Vite项目，并在浏览器中查看Cesium的效果。

请注意，这些步骤是基于搜索结果和常见的Vite与Cesium集成方法。具体的配置可能会根据Cesium和Vite插件的版本有所不同，因此建议查看相关文档以获取最新的指导。

运行效果

vue3 vite项目如何使用cesium?

其他问题

如果使用了七牛cdn打包后的html页面代码里widgets.css Cesium.js 前面少一个斜杠，不清楚是什么原因，打包后，还需要手动添加一下斜杠，所以这里对插件做了二次修改vite-plugin-cesium插件配置域名后地址出错。

 <link rel="stylesheet" href="/images.wanjunshijie.com/demo/cesium/vue3/cesium/Widgets/widgets.css">
  <script src="/images.wanjunshijie.com/demo/cesium/vue3/cesium/Cesium.js"></script>