Vue:Vue项目中的Cesium配置备忘录

作者:CSDN @ 乐多

本文记录了 Vue 项目中配置 Cesium 相关过程和细节。


文章目录


一、安装Cesium

bash 复制代码
npm install Cesium

在node_modules中找到Cesium,将其中的Cesium文件夹复制到public中。

二、配置 index.html

主要加入这两行,

javascript 复制代码
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script src="./Cesium/Cesium.js"></script>

整个 index.html 如下,

javascript 复制代码
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>

  <link rel="stylesheet" href="./Cesium/Widgets/widgets.css">

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="./Cesium/Cesium.js"></script>
</body>

</html>

声明:

本人作为一名作者,非常重视自己的作品和知识产权。在此声明,本人的所有原创文章均受版权法保护,未经本人授权,任何人不得擅自公开发布。

本人的文章已经在一些知名平台进行了付费发布,希望各位读者能够尊重知识产权,不要进行侵权行为。任何未经本人授权而将付费文章免费或者付费(包含商用)发布在互联网上的行为,都将视为侵犯本人的版权,本人保留追究法律责任的权利。

谢谢各位读者对本人文章的关注和支持!

相关推荐
徐小夕15 小时前
万字长文!DeepSeek Super-agent × 企业知识库架构深度拆解与落地实践
前端·vue.js·github
陈随易15 小时前
TanStarter,从搭建到支付,一步到位开始赚美元
前端·后端·程序员
前端双越老师15 小时前
程序员 1v1 访谈系列第十二期:普通人没有核心竞争力
前端·ai编程·全栈
柳杉16 小时前
没有写一行代码:我用 Codex 制作 了一个 3D 智慧展厅可视化大屏
前端·ai编程·three.js
IT_陈寒16 小时前
Redis开发实战:从入门到精通
前端·人工智能·后端
恋猫de小郭16 小时前
Flutter Impeller Vulkan 内存持续上涨,问题没想到是文字阴影
android·前端·flutter
0xBADCODE16 小时前
2026 强网杯 Web 题 cwp · 全链路复盘
前端·安全·web安全·网络安全·系统安全·ctf
麦麦麦当劳大王1 天前
【油猴脚本】Boss直聘 岗位职责复制
开发语言·前端·javascript
小lu飞1 天前
2026小红书小工具怎么制作:纯前端 ZIP 打包、沙箱限制与笔记挂载流程
前端·笔记·ai·ai编程
只睡四小时1 天前
Three.js Sub-tick:漏判 60.7%→0
开发语言·javascript·性能优化·ecmascript·游戏开发·three.js·碰撞检测