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

步骤

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

4. 配置 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",
        },
      ],
    }),
  ],
});

5. 配置 main.js ：

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

6. 加载：（直接修改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>

参考

1. CesiumGS/cesium-vite-example: The minimal recommended setup for an application using Cesium with Vite. (github.com)