Vue3的Vite项目中直接引入的方式使用Cesium

不使用 CDN、不安装 npm 包，直接把 Cesium 静态文件放到项目里，通过本地路径 /Build/Cesium/xxx 引入并使用，这是离线 / 私有化部署最常用的方式。

一、先准备 Cesium 本地文件

1. 下载 Cesium 官方包

去官网下载对应版本（你用的 1.138.0）：

👉 Cesium-1.138.0.zip（直接下载整个包，或者从 npm 缓存里拷贝 Build 文件夹）

2. 放入项目根目录（和 index.html 同级）

你的项目结构必须是这样：

复制代码

你的项目/
├── Build/          # 把下载的 Cesium 里的 Build 文件夹直接放这
│   └── Cesium/
│       ├── Cesium.js
│       ├── Workers/
│       ├── Assets/
│       └── Widgets/
├── index.html
├── vite.config.js
└── src/

路径正确后，才能用 /Build/Cesium/Cesium.js 访问。

二、配置 index.html（直接用你给的路径）

在根目录 index.html 里直接引入本地文件：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Vue3 + 本地Cesium</title>
  <!-- 直接引入本地 Cesium -->
  <script src="/Build/Cesium/Cesium.js"></script>
  <link href="/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

三、Vite 关键配置（必须加，否则直接报错）

修改 vite.config.js，告诉 Vite 这是外部全局资源，不编译、不打包：

复制代码

import { defineConfig } from 'vite'
import vue from '@plugin-vue'

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

  // 1. 排除 Cesium，不让 Vite 处理
  optimizeDeps: {
    exclude: ['Cesium']
  },

  // 2. 配置全局基础路径（核心！解决 Workers/Assets 加载失败）
  define: {
    CESIUM_BASE_URL: JSON.stringify('/Build/Cesium/')
  }
})

四、组件中直接使用（无需 import！）

在任意 Vue 组件里，直接用 window.Cesium，完全不用导入：

复制代码

<template>
  <div id="cesiumContainer" style="width:100%;height:800px;"></div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 直接用！无需 import
  const Cesium = window.Cesium

  // 令牌（必须）
  Cesium.Ion.defaultAccessToken = '你的Cesium Ion令牌'

  // 初始化地球
  const viewer = new Cesium.Viewer('cesiumContainer', {
    terrain: Cesium.Terrain.fromWorldTerrain()
  })
})
</script>

五、最常见的 3 个问题（我直接帮你解决）

报错：Failed to load resource /Workers/...

✅ 原因：没配置 CESIUM_BASE_URL✅ 解决：vite.config.js 里必须加：

复制代码

define: { CESIUM_BASE_URL: JSON.stringify('/Build/Cesium/') }

页面找不到 /Build/Cesium.js

✅ 原因：Build 文件夹放错位置✅ 解决：必须放在项目根目录，和 index.html 同级。

地图黑屏 / 不加载

✅ 原因：没加 Ion 令牌✅ 解决：必须设置：

复制代码

Cesium.Ion.defaultAccessToken = '你自己的token'

六、这种方式的优势（你选的是最优方案）

完全本地离线，不依赖网络 CDN
不打包、不编译，Vite 启动超快
版本完全可控，不会自动更新
适合内网 / 私有化部署
使用最简单，直接 window.Cesium