vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue项目中引入cesium

vue项目中如何引入cesium

作者:落笔映浮华H

这篇文章主要介绍了vue项目中如何引入cesium问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue项目中引入cesium

市面上的前端框架中,Vue+Cesium 可谓是最佳搭档,一般做 Cesium B 端产品的公司都会使用 Vue,所以后续内容都将基于 Vue

通常情况下,我们要在 Vue 中使用 Cesium,首先要安装 Cesium,然后要在 vue-cli 的 webpack 配置很多东西,对一些有经验的人来说只不过麻烦些,但是对 Cesium 的初学者来说会很痛苦,因为没有使用过,也不知到要怎么配置,只能搜索网上的教程,一步一步踩坑

其实不管是有经验或是初学者,每次写项目重复配置这些东西都很麻烦

vue-cli-plugin-cesium 就是为了解决这个问题

安装步骤

1、npm install cesium --save

2、npm install --save-dev vue-cli-plugin-cesium

3、vue invoke vue-cli-plugin-cesium

vue项目中CDN引用cesium

cesium包太大,本来使用npm  install cesium 的方式引用,后发现打包后文件太大,影响了页面加载速度,遂改为cdn引入,打包压缩后小了3M多的体积。

1. index.html cdn引入

<link href="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Widgets/widgets.css" rel="external nofollow"  rel="stylesheet">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script>

2. build / webpack.config.js 加入externals 如下配置 (vue/cli2.x版本)

module.exports = {
    ...
 
    externals: {
        Cesium: 'Cesium'
    }
}

3. cesium使用的组件中 ,import后即可使用

import * as Cesium from 'Cesium'

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文