Cesium入门教程（三）环境搭建（Vue版）

一、创建Vue项目

1. 初始化项目
打开终端，执行以下命令创建Vue3项目（使用Vite）：

npm create vue@latest my-cesium-project
cd my-cesium-project

2. 安装依赖并运行

cnpm install
npm run dev

访问 http://localhost:5173，看到Vue欢迎页面即成功。

二、引入Cesium库

1. 安装Cesium依赖
在项目根目录执行：

cnpm install cesium --save

2. 创建Cesium组件
在 src/components 目录下新建 CesiumViewer.vue 文件，粘贴以下代码：

<template><div ref="cesiumContainer" class="cesium-container"></div></template><script setup>import { onMounted, ref } from 'vue';import { Viewer,Cartesian3,Color } from 'cesium';import 'cesium/Build/Cesium/Widgets/widgets.css';const cesiumContainer = ref(null);onMounted(() => {// 指定Cesium资源路径（关键步骤！）window.CESIUM_BASE_URL = '/cesium/';// 创建Viewer实例const viewer = new Viewer(cesiumContainer.value, {animation: false, // 关闭动画控件baseLayerPicker: false // 关闭图层选择器});// 添加示例：北京标记点viewer.entities.add({position: Cartesian3.fromDegrees(116.391, 39.907),point: { pixelSize: 10, color: Color.RED },label: { text: '北京' }});viewer.zoomTo(viewer.entities);});</script><style scoped>.cesium-container {width: 100%;height: 100vh; /* 占满整个屏幕高度 */margin: 0;padding: 0;}</style>

三、配置静态资源

1. 拷贝Cesium资源文件
将 node_modules/cesium/Build/Cesium 目录下的以下文件夹复制到项目 public/cesium 目录：

• Assets/
• ThirdParty/
• Widgets/
• Workers/

（若 public/cesium 目录不存在，请手动创建）

2. 验证资源路径
打开浏览器开发者工具（F12），检查以下文件是否加载成功：

• /cesium/Widgets/widgets.css
• /cesium/Workers/createVectorTilesetMain.js

四、在主组件中引入

1. 修改 App.vue
替换为以下内容：

<template><CesiumViewer />
</template><script setup>
import CesiumViewer from './components/CesiumViewer.vue';
</script>

五、运行并验证

1. 启动项目

npm run dev

2. 预期效果

• 浏览器中显示地球模型
• 地图中心显示红色标记点“北京”
• 无控制台报错（若有报错，检查步骤二中 window.CESIUM_BASE_URL 配置）

---

📦 本教程测试工程源码

网盘资源

文件名称：my-cesium-project

分享链接：点击访问

提取码：ming

-- 来自https://cesium.js.cn的分享

📝 说明: 网盘中包含了本教程的完整示例代码，建议下载保存以供参考。