创立目录
mkdir cesium-vite-testcd cesium-vite-test/创立 package.json
yarn init -y装置依赖
yarn add -D cesium vite vite-plugin-cesium因为 Cesium 不是一个一般的 npm 包，须要依赖一些 css ，图片，json 啥的。咱们要参考 Cesium 官网的 webpack 教程 来做一堆额定的工作。 值得庆幸的是当初 Vite 有了 vite-plugin-cesium 插件，来帮咱们实现这些配置。
创立 vite.config.js
import { defineConfig } from 'vite';import cesium from 'vite-plugin-cesium'; // 引入插件export default defineConfig({ plugins: [cesium()],});在 package.json 中退出 dev 和 build 命令
"scripts": { "dev": "vite", "build": "vite build"},配置实现分割线。
能够开始写代码开发了。
src/index.js
import { Viewer } from 'cesium';import "./css/main.css";const viewer = new Viewer('cesiumContainer');index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cesium-vite</title> <script type="module" src="/src/index.js"></script></head><body> <div id="cesiumContainer"></div></body></html>src/css/main.css
html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}运行 yarn dev ，哒哒实现。
残缺代码请看 vite-cesium-demo 喜爱请去点个赞，谢谢。