1.cesium+vue3初始化

1.首先创建vue3项目

npm create vue@latest

2.然后删除app.vue里多余的内容 进行初始化

3.然后安装cesium

npm i cesium@1.99 vite-plugin-cesium

4申请token

5.然后vite.config.js中导入cesium

import cesium from ‘vite-plugin-cesium’

plugins: [
vue(),
cesium()
],

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    cesium()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

6.然后再app.vue中引入cesium

import * as cesium from 'cesium'
console.log(cesium); //有打印就okle

7.创建容器
在onMounted中初始化cesium

<template>
  <div id="cesiumContent">
  </div> //创建容器
</template>
<script setup>
import { onMounted} from 'vue'
import * as Cesium from 'cesium'
console.log(Cesium);
onMounted(()=>{
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MjEzMTIyZS0wZTYxLTRmYmUtOTAwMC02OTI0YTUzYjNhMDciLCJpZCI6MjMyMjU3LCJpYXQiOjE3MjI1ODkxNjh9.ojMT5Gn6hJUBUywEzDwdZnR3-8rEO7vJ8z6bSB4HxEY'
  new Cesium.Viewer('cesiumContent')
})
</script>
<style scoped>
#cesiumContent{
  width:100vw;
  height:100vh;
}
</style>

简单效果如下