vite+vue集成cesium

1、创建项目、选择框架vue+js

复制代码
pnpm create vite demo_cesium

2、进入项目安装依赖

复制代码
cd demo_cesium
pnpm install

3、安装cesium及插件

复制代码
3、pnpm i cesium vite-plugin-cesium

4、修改vite-config.js

复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()],
})

5、删除style.css,修改App.vue

复制代码
<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {
  Cesium.Ion.defaultAccessToken = '' //改为自己申请的token
  new Cesium.Viewer('cesiumContainer')   
})
</script>
<style scoped></style>

6、运行

复制代码
pnpm dev
相关推荐
JayceM13 分钟前
Vue中v-show与v-if的区别
前端·javascript·vue.js
HWL567918 分钟前
“preinstall“: “npx only-allow pnpm“
运维·服务器·前端·javascript·vue.js
咪咪渝粮43 分钟前
JavaScript 中constructor 属性的指向异常问题
开发语言·javascript
无羡仙1 小时前
事件流与事件委托:用冒泡机制优化前端性能
前端·javascript
秃头小傻蛋1 小时前
Vue 项目中条件加载组件导致 CSS 样式丢失问题解决方案
前端·vue.js
CodeTransfer1 小时前
今天给大家搬运的是利用发布-订阅模式对代码进行解耦
前端·javascript
鹏多多1 小时前
js中eval的用法风险与替代方案全面解析
前端·javascript
热爱2331 小时前
前端面试必备:原型链 & this 指向总结
前端·javascript·面试
Spider_Man1 小时前
面试官:你能手写 bind 吗?——JS this 全家桶趣味深度剖析
前端·javascript·面试
ikonan1 小时前
译:不要过度优化你的优化
前端·javascript·react.js