// 安装
yarn add cesium vite-plugin-cesium vite -D // npm i cesium vite-plugin-cesium vite -D
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'; // 引入 cesium
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium()], // 配置 cesium 插件
})
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
// 在页面挂载完成后,渲染
onMounted(() => {
const viewer = new Cesium.Viewer('cesiumContainer')
})
</script>
<template>
/* 装载 cesium 的容器 */
<div id="cesiumContainer"></div>
</template>
<style scoped>
/* 初始化页面的样式 */
html,
body,
#cesiumContainer {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
官方配置方法,参考:Github-vite-plugin-cesium