vue项目中CDN引用cesium

最新推荐文章于 2024-06-26 15:26:03 发布

人生几何呢

最新推荐文章于 2024-06-26 15:26:03 发布

阅读量2.7k

点赞数 2

分类专栏： cesium Vue 框架文章标签： webpack vue.js gis 前端

本文链接：https://blog.csdn.net/ZcBob/article/details/121489000

版权

cesium 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

框架

2 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

博客讲述了在项目中引用cesium库时，由于npm安装导致的文件体积过大问题，作者通过将cesium改用CDN引入，成功减少了3M的打包体积。在index.html中添加cesium的CDN链接，并在webpack.config.js中配置externals，确保组件仍能正常工作。

摘要由CSDN通过智能技术生成

引言：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="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'

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

人生几何呢

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue项目中CDN引用cesium

vue cdn引入cesium，优化项目打包体积
复制链接

扫一扫

专栏目录

vue3.x中使用cesium，vue3.x+Cesium

05-04

将Cesium集成到Vue3.x项目中，可以创建交互式的3D地图应用。以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`...

electron-vue-cesium配置【CDN引入方式】

maotou526的博客

02-09

1402

electron-vue-cesium配置node环境安装Cesium调整webpack.renderer.config.js合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 node环境 node 版本：v14.2.0 npm 版本：6.

2 条评论您还未登录，请先登录后发表或查看评论

Vue项目-Cesium地图初始化

StupidlyGrass的博客

11-08

455

将node_modules/cesium/Build/Cesium文件夹拷贝到vue项目public/3、index.html引入js/css文件。4、组件中初始化地图。

使用CDN方式创建Vue3.0应用程序

最新发布

pan_junbiao的博客

06-26

373

CDN 的全称是 content delivery network，即内容分发网络。它是构建在现在的互联网基础之上的一层智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发和调度等功能模块，使用户就近获取所需内容，解决 Internet 网络拥挤的状况，提高用户访问网站的响应速度。在项目中使用 Vue.js 时可以使用 CDN 的方式。这种方式很简单，只需要选择一个提供稳定 Vue.js 链接的 CDN 服务商即可。下面将使用使用CDN方式，创建一个 Vue3.0 程序。

Cesium 入门（一）无服务 Cesium 环境

镜花水月

11-18

821

离线 Cesium 3D 地球。

Cesium.js三维地图的实现（依托天地图CDN文件）

@Fonden

12-25

1005

Vue2、VueCli5、天地图、Cesium.js。

Cesium开发环境搭建的几种方法总结

Clairesean的博客

12-21

3686

Cesium开发的几种方式，包括传统html开发，webpack模式开发，利用源码开发，vue组件方式开发

cesium学习链接

Handsome2013的博客

04-05

323

cesium学习链接 https://zhuanlan.zhihu.com/p/50534090 https://www.jianshu.com/p/ad1b6271e937/ https://www.jianshu.com/p/fc0252e63204 https://www.cnblogs.com/fuckgiser/p/5706842.html

vue2.0项目集成Cesium的实现方法

10-16

Vue 2.0 项目集成 Cesium 是一种将流行的3D地球可视化库 Cesium 引入到基于 Vue.js 的前端应用程序中的技术。Cesium 提供了丰富的地理空间数据展示功能，使得开发人员能够构建交互式的三维地球应用。以下是如何在 ...

vue项目中用cdn优化的方法

08-28

本文将详细介绍如何在 Vue 项目中使用 CDN 优化的方法。什么是 CDN？ CDN（Content Delivery Network，内容分发网络）是一种分布式网络系统，通过将静态资源缓存在各地的服务器上，减少了用户访问资源的延迟和...

vue中集成cesium和threejs

12-30

项目介绍：在vue中集成cesium三维地球和threejs图形库，更好地发挥它们各自的优势。运行说明：下载完成后，先npm install安装依赖，然后npm run serve启动项目即可。详细说明：...

【一文带你cesium入门】

weixin_45727272的博客

05-17

954

引言： Cesium是一个强大的JavaScript库，用于创建交互式的地理空间应用。它提供了丰富的功能和工具，使开发者能够构建令人惊叹的地球模型、地图可视化和地理数据分析。本文将带你逐步了解Cesium的基本概念和用法，并通过代码示例展示其强大的功能。

在vue中cesium怎么使用

weixin_28898107的博客

11-07

455

1. 安装vue-cli-plugin-cesium，运行命令 `npm install -g vue-cli-plugin-cesium`。在Vue中使用Cesium，首先你需要将Cesium库导入到项目中。另外，推荐使用vue-cli-plugin-cesium插件，配置简单，使用方便。1. 安装cesium，运行命令 `npm install cesium --save`。3. 在创建过程中选择添加vue-cli-plugin-cesium插件。

Cesium 在vue中如何引入

qq_37732512的博客

12-06

3410

这篇文章并没有从优化、打包、最优引入方面来分析，仅仅是列出了几种引入方式，主要是在平常开发中，这些也确实够了，最近又看了一位博主的文章，已经说的很明白了，从Cesium前置知识、到打包优化、再到选择最优引入，这一篇文章已经够用了。教程 - 在 Vue3+Ts 中引入 CesiumJS 的最佳实践@2023。

vue引入cesium

qq_39274806的博客

12-14

398

index.html引入之后还需要在package.json中添加globals。vue.config.js中添加configureWebpack。

1.Cesium介绍及环境配置

热门推荐

极限突破者的博客

07-11

1万+

本文中我们介绍了cesium开发环境的配置，以及vue中cesium页面的初始化

vue cli cesium环境搭建

God's asylum的博客

03-21

1809

Vue CLI 搭建cesiumcesium简介1. 引入cesium包2.安装的cesium引入public静态资源中3.全局引入cesium第一种引入cdn引入在public/index.html中第二种引入在main.js中 cesium简介 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile 1. 引入cesium包 npm i

Cesium+vue2环境搭建

纸飞机的旅行的博客

02-26

3665

Cesium+vue2环境搭建

vue首页加载优化,vue使用cdn加载插件,vue cdn优化

ws - 兮的博客空间

06-28

1959

问题: vue 线上打开首页速度太慢，js文件太大，且全部走当前服务器获取 js/css 数据，服务器带宽也跟不上处理方式：把一些 js/ css 使用 cdn 的方式进行加载优化后使用 cdn 地址加载，浏览器可以快速拉取到数据1、配置排除依赖 2、配置cdn地址 3、关闭打包生成 map.js 文件定义配置信息加入配置 externals = 排除 cdn 信息注入到配置中 2、public/index.html 读取 main.js 注入的配置 3、效果查看 1、首页会写入 css/js 文件2、

vue中以cdn方式引用cesium

07-13

在Vue中以CDN方式引用Cesium，你可以按照以下步骤进行操作： 1. 在你的Vue项目中的`index.html`文件中，添加Cesium的CDN链接。你可以在Cesium官方网站上找到最新的CDN链接，例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue Cesium CDN</title> <script src="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Widgets/widgets.css"> </head> <body> <div id="app"></div> <script src="/js/app.js"></script> </body> </html> ``` 2. 在Vue组件中使用Cesium。你可以在需要使用Cesium的Vue组件中，通过`window.Cesium`来访问全局的Cesium对象。例如，在一个Vue组件的`mounted`钩子函数中，你可以初始化Cesium地球： ```javascript mounted() { const viewer = new window.Cesium.Viewer('cesiumContainer'); // 其它Cesium相关操作... } ``` 3. 在Vue组件的模板中，添加一个容器元素来显示Cesium地球。例如，你可以在模板中添加一个具有`id`为`cesiumContainer`的`div`元素： ```html <template> <div> <div id="cesiumContainer"></div> </div> </template> ``` 这样，在Vue中就可以通过CDN方式引用Cesium，并在组件中使用它来创建交互式地球应用程序。记得根据你需要的Cesium版本来更新CDN链接。希望对你有所帮助！如果还有其他问题，请随时提问。