1、vue3+cesium之，如何创建地球_vue3使用cesium

先利用脚手架创建好vue项目

1. • 安装

npm install cesium

2. • 把node_modules中的cesium中的这4个文件

然后把 node_modules\cesium\Build\Cesium 中的上面四项拷贝到public里面，再把样式文件夹Widgets 复制一份到Src下一份。

3. • 项目中的使用

一共4步骤：

1、创建cesium的盒子cesiumContainer，并设置尺寸

2、导入cesium

3、导入样式

4、设置cesium的静态资源，就是复制到public中的那些

<template>
  <div id="cesiumContainer" class="cesiumContainer"></div>
</template>
 
<script setup>
import * as Cesium from 'cesium'//1、导入cesium
import '@/Widgets/widgets.css'//2、导入样式
import { onMounted } from 'vue'//导入onMounted
window.CESIUM_BASE_URL = '/' //3、cesium的静态资源，就是复制到public中的那些
onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer')
  console.log(viewer)
})
</script>
 
<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

4. • 遇到的问题

1、如果遇到下面问题：

执行启动项目命令时，出现 BREAKING CHANGE: webpack ＜ 5 used to include polyfills for node.js core modules by default。。。

报错，原因是由于在webpack5中移除了nodejs核心模块的polyfill自动引入，所以需要手动引入

解决方案：

1.安装node-polyfill-webpack-plugin

npm install node-polyfill-webpack-plugin

2 . 然后在vue.config.json中添加：如果没有vue.config.json，就自己创建一个vue.config.json

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
  
 
 
 
configureWebpack: {
    plugins: [new NodePolyfillPlugin()]
  },

2、如果显示一片空白，请检查是否赋予了cesiumContainer容器尺寸