在ruoyi-cloud-vue3中使用Cesium的问题

在ruoyi-cloud-vue3中使用Cesium的问题

在一次项目中，使用到Ruoyi-Cloud-vue3进行开发，在一块功能需求里需要使用Cesium进行展示，正常yarn add cesium后使用会报 CESIUM_BASE_URL的错误。我们需要vite-plugin-cesium插件进行一些配置。

安装依赖

yarn add -D vite-plugin-cesium

vite.config.js添加插件

在vite/plugins目录下新建文件plugin-cesium.js

import cesium from 'vite-plugin-cesium';

export default function createCesiumPlugin() {
    return cesium()
}

修改vite/plugins/index.js添加插件

import vue from '@vitejs/plugin-vue'

import createAutoImport from './auto-import'
import createSvgIcon from './svg-icon'
import createCompression from './compression'
import createSetupExtend from './setup-extend'
// 添加vite-plugin-cesium插件
import createCesiumPlugin from './plugin-cesium'

export default function createVitePlugins(viteEnv, isBuild = false) {
    const vitePlugins = [vue()]
    vitePlugins.push(createAutoImport())
	vitePlugins.push(createSetupExtend())
    vitePlugins.push(createSvgIcon(isBuild))
    vitePlugins.push(createCesiumPlugin())
	isBuild && vitePlugins.push(...createCompression(viteEnv))
    return vitePlugins
}

然后就可以使用Cesium啦

import * as Cesium from "cesium";

this.viewer = new Cesium.Viewer("cesiumContainer", {
    shouldAnimate: true,
    sceneMode: Cesium.SceneMode.SCENE3D,
    animation: true,
    selectionIndicator: false,
    baseLayerPicker: false,
    timeline: true,
    sceneModePicker: true,
    homeButton: false,
    geocoder: false,
    infoBox: false,
    navigationHelpButton: false,	
});

参考源贴：一分钟搭建 Vite + Cesium 开发环境