教程 - 深度探讨在 Vue3 中引入 CesiumJS 的最佳方式

🚀 优质资源分享 🚀

目录* 1. 你应该先知道的基础知识
+ 1.1. CesiumJS 的库构成
+ 1.2. 选择 Vite3 和 pnpm 的理由
+ 1.3. 使用 External 模式引入静态库 - 不打包静态库
+ 1.4. 切勿什么都 import - 以及页面运行的时候的路径与开发时的路径

• 2. 一步一步教你创建项目
  • 2.1. 使用 create-vue 或 vite 模板
  • 2.2. 指定版本安装 cesium 依赖
  • 2.3. 不使用锁文件
  • 2.4. 配置 External 和构建后的 index.html
  • 2.5. 静态资源复制脚本
  • 2.6. 使用环境变量配置 CESIUM_BASE_URL
  • 2.7. 使用全局状态库跨组件共享 Viewer 对象
• 3. 伸手的看过来 - 工程下载

---

由于 Vue2 已经进入维护期，且 Vue2 对待组件内的 data 是无差别使用 Object.defineProperties 递归将其劫持的，对于复杂状态的对象会造成严重的 JavaScript 访问路径过长而导致的 性能问题，这个应该是老生常谈了。

Vue3 提供了 markRaw 函数，标记一个对象，令 Vue 不再将其视作 响应式 数据，所以本文基于 Vue3 来介绍如何引入 CesiumJS。

心急的朋友可以直接跳过本文的介绍，拉到文末，有示例工程 zip 下载。

1. 你应该先知道的基础知识

除了 Vue3 和 Vue2 的响应式设计区别外，我认为还需要补充一点知识。

1.1. CesiumJS 的库构成

Cesium 是一个高度集成的重型 JavaScript 库，这是共识。它的源码虽然是 ESModule 格式的，但是并没有直接提供类似 index.js 的出口文件，也不存在子包的概念，只是在 Source 文件夹下简单分了几个大板块文件夹，例如 Source/Renderer 文件夹就是 CesiumJS 中整个渲染器的代码模块。

通常，除了二次修改 CesiumJS 源代码构建自己的分支版本，一般不会在 WebAPP 中直接使用 CesiumJS 的源码。一般使用的是 CesiumJS 的 构建版本，也就是 Build 文件夹下的压缩版或未压缩版库文件。

主库文件有三种格式，ESModule 的是 index.js，IIFE 的是 Cesium.js，CommonJS 的是 index.cjs。除了主库文件外，构成构建版本的 CesiumJS 还有 4 个文件夹下的静态资源：

• Assets 文件夹，图片或 JSON 等前端运行时可能用到的资源
• ThirdParty 文件夹，WebAssembly 等前端运行时可能用到的第三方资源
• Widgets 文件夹，主要是各个 CesiumJS 自带的界面小部件的 CSS 文件
• Workers 文件夹，前端运行时用到的 WebWorker 的构建版本（WebWorker 由于一些原因，在前端运行时仍然用 CommonJS 格式加载）

因此，你在任何所谓的教程里面都会看到这四个静态资源文件夹的复制操作，除了 CDN 直接使用的方式。我在这里说清楚，希望你知道原因。

1.2. 选择 Vite3 和 pnpm 的理由

笔者是 Vite 1.0 的首批用户。尤雨溪第一次介绍 Vite 是在 Vue 3.0 测试版网络会议上，只是作为一个很小的“玩具”介绍了一下，当时的 Vite 还是与 Vue 强关联的，后来到了 Vite 2.0 才解耦合。简单的说，Vite 3.0 对 Vite 2.x 并不是破坏性更新，只是考虑到 NodeJS 12.x 已经 EOL 了，索性 3.0 就不再支持 NodeJS 12.x，其余特性笔者没特别了解。

简单的说，使用 Vite 作为开发服务器和打包工具，不外乎几个原因：

• esbuild 速度有目共睹
• 中文文档齐全
• 是 cli 的官方指定继任者

对于开项目，我有几点建议：

• 如果你只是写一个小的项目，可以用 Vite 官方模板；如果是 Vue3 项目，直接使用 create-v