【CesiumJS入门】（12）Vite+Vue3+Cesium 简易安装与配置

步骤

vite 创建项目：yarn create vite
安装 Cesium：yarn add cesium
安装 vite-plugin-static-copy：yarn add -D vite-plugin-static-copy

在这里插入图片描述

配置 vite.config.js ：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";import { viteStaticCopy } from "vite-plugin-static-copy";export default defineConfig({define: {CESIUM_BASE_URL: JSON.stringify("/cesiumStatic"),},plugins: [vue(),viteStaticCopy({targets: [{src: "node_modules/cesium/Build/Cesium/ThirdParty",dest: "cesiumStatic",},{src: "node_modules/cesium/Build/Cesium/Workers",dest: "cesiumStatic",},{src: "node_modules/cesium/Build/Cesium/Assets",dest: "cesiumStatic",},{src: "node_modules/cesium/Build/Cesium/Widgets",dest: "cesiumStatic",},],}),],
});

配置 main.js ：

// 新增：
import "cesium/Build/Cesium/Widgets/widgets.css";
import "@cesium/engine/Source/Widget/CesiumWidget.css";

在这里插入图片描述

加载：（直接修改App.vue文件进行演示）

<script setup>
import { onMounted } from "vue";
import { Ion, Viewer } from "cesium";onMounted(() => {Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ODRiMTU0NS05NmJlLTRhNzYtYjA3OS02N2JmY2RhMDE0NDgiLCJpZCI6MTA3OTM5LCJpYXQiOjE2NjMxMjk1Nzd9.XmVmA2d7T2qG6y4vAcQrmb9msWbnLxCe5qYtnlK8h5k";new Viewer("cesiumContainer");
});
</script><template><div id="cesiumContainer" style="width: 100%; height: 100%"></div>
</template>