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>

声明:

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

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

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

相关推荐
hongkid6 小时前
React Native 如何打包正式apk
javascript·react native·react.js
李少兄6 小时前
简单讲讲 SVG:前端开发中的矢量图形
前端·svg
前端小万6 小时前
告别 CJS 库加载兼容坑
前端·前端工程化
恋猫de小郭6 小时前
Flutter 3.38.1 之后,因为某些框架低级错误导致提交 Store 被拒
android·前端·flutter
JarvanMo6 小时前
Flutter 需要 Hooks 吗?
前端
光影少年6 小时前
前端如何虚拟列表优化?
前端·react native·react.js
Moment6 小时前
一杯茶时间带你基于 Yjs 和 reactflow 构建协同流程图编辑器 😍😍😍
前端·后端·面试
菩提祖师_6 小时前
量子机器学习在时间序列预测中的应用
开发语言·javascript·爬虫·flutter
invicinble6 小时前
对于前端数据的生命周期的认识
前端
PieroPc7 小时前
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
前端·html·fastapi