vue中使用cesium方法总结

最近做的毕设用到了cesium，这里给大家总结一下vue如何结合cesium

首先确定你使用的脚手架，vue-cli还是vite

插件 | Vite 官方中文文档 (vitejs.dev)

如果是vite，那么只需要在官方文档中找到社区插件，然后找到cesium安装即可使用

如果你是用vue-cli(大部分还是使用这个)，有三种方式可以引入cesium

（注意：该方法对应的是vue2+vue-cli4）

最后可能，CDN的引入方法才最适合你的，有的时候不要死磕，时间成本很重要，遇到问题再解决。

1配置webpack

Cesium and webpack – Cesium

第一种就是配置webpack，这种方法适合对webpack十分熟悉的大佬。相信看这个视频的肯定webpack不熟吧我也不熟，所以只针对小白简单科普一下。vue-cli是基于webpack的构建vue项目的工具，也就是vue-cli搭建的项目模板，在运行时会打包、配置 、转义资源，提高效率vue-cli在3之后就开始不再自动生成webpack.config.js，而是用手动添加vue.config.js来代替vue-cli4搭建出来的项目不能正确打包解析cesium内文件，可以理解为cesium内文件结构的问题如何配置webpack呢？抄csdn（bushi）其实就是因为cesium某些资源的路径不满足vue-cli默认打包规则，需要自定义一下。官网的webpack示例，我也没看明白，CSDN上配置也千奇百怪。总之我没找到比较官方的Cesium文件打包要做哪些事，估计要自己观察文件结构，结合CSDN来CTRL CV一个了。小白不要轻易尝试，不然会出很多问题 2使用vue-cli-plugins插件

isboyjc/vue-cli-plugin-cesium: Cesium encapsulation based on Vue cli (github.com)

第二种是使用vue-cli的插件这种方式最简单，不会出现问题，适合vue+cesium都不够熟悉的新手这个插件是个人基于vue-cli-plugins的开发规则开发出来的，链接我也放在评论区了使用方法也十分的简单，只需要按照要求安装即可。需要注意的是，不要随意卸载。卸载后再安装会有语法检查不通过，通过不了就无法安装，无法安装就语法检查不通过，通过了不了就无法安装…balabala 3使用vue-cesium

zouyaoji/vue-cesium: 🎉 Vue 2.x & Vue 3.x components for CesiumJS. (github.com)

然后就是使用vue-cesium，一个把cesium组件化的库，就像elementUI的用法一样这种方法适合对vue和cesium都有一定程度了解的同学使用方法是先按照文档安装，然后根据示例，进行开发，就像Ant Design与elementUI一样。但这种方法，我人为不适合新手，更适合给老手当生产力工具。而且网上大部分教程都是手撸的JS。所以，新手还是手撸js代码，比较合适。