vue工程快速导入cesium（main.js导入）

最新推荐文章于 2025-10-24 11:13:30 发布

原创

最新推荐文章于 2025-10-24 11:13:30 发布 · 4.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue #github

本文详细介绍如何在Vue项目中集成CesiumJS，包括使用vue-cli-plugin-cesium插件，解决不同Cesium版本的兼容性问题，以及通过具体代码示例展示如何在Vue组件中正确引用和操作Cesium。

首先列出帮助的网站
cesium中文社区
 环岛公路博客
然后是导入过程

首先可以用vue-cli创建项目

或者安装vue-cli

npm install vue-cli -g

然后推荐个插件vue-cli-plugin-cesium
vue-cli-plugin-cesium的GitHub地址

这个也不是单纯npm就可以的了，我把我的安装步骤说明一下，当然，先看看上面的网站也是挺好的

第一步就是建个工程
在这里插入图片描述
然后选择下一步默认就行
然后按需要导入自己想要的插件
然后用脚手架下载vue-cli-plugin-cesium

然后配置插件

（这个是我后来才发现的快捷配置）
或npm上面的插件

// npm
npm install --save-dev vue-cli-plugin-cesium

然后
一定要做的一步，当然这个也是可以页面导入的

vue add vue-cli-plugin-cesium

然后会有三个询问，

一个是问你时候初始化
二是问你css时候全局导入
三是问你时候导入一个例子

然后我是全选是

然后vscode打开项目（或者你使用的编译器）

在这里插入图片描述
然后还有一个需要改动的地方
环岛公路的博客地址
非常感谢，助我脱困

***vue+cesiumjs环境搭建【import引入】
之前写了一遍博客关于vue+cesium的搭建，后面是在index.html里通过script引入的，但是后面要用到指南针的时候发现指南针没法引入了
之前的链接:  https://www.cnblogs.com/reround/p/11943717.html
后来慢慢调试发现原来是cesium的版本问题
我在11月底安装的cesium的版本是1.63.0  12月多安装的版本是1.64.0
这个两个 版本都是没法通过 
import Cesium from 'cesium/Cesium'
这样来引入的 
但是我们换成1.61.0 就不会出现这样的问题
首先卸载掉你项目的cesium
npm uninstall cesium
卸载完成后再去安装1.61.0的版本
npm install cesium@1.61.0 --save
然后可以把static下的cesium文件夹删除  index.html里的script引入删掉
直接在mainjs里
import Cesium from 'cesium/Cesium'
import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
Vue.prototype.Cesium = Cesium
通过import来引入  这样后面的指南针也可以引入了***

可以看出cesium版本1.61版本才支持导入
so
先卸载
npm uninstall cesium
再下载1.61.0版本
npm install cesium@1.61.0 --save

然后写个vue页面单独引用插件给的例子

<template>
  <div class="about">
    <CesiumViewer />
  </div>
</template>

<script>
import CesiumViewer from '@/components/CesiumExample/No01-init.vue'
export default {
   
   
  components:{