关于#VUE3glb#的问题，如何解决？(关键词-vite)

VUE3中使用cesium的glb模型时不能识别，（在vue2时我下载了url-loader和file-loader，还在vue.config.js里进行了配置），但是在vue3里应该怎么处理呢，找了很久都没有相关说明

在Vue3中使用Cesium的glb模型，需要先安装cesium和cesium-webpack依赖，然后在vue.config.js中进行配置。

安装依赖
bash
npm install cesium cesium-webpack --save
配置vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  publicPath: './',
  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        cesium: 'cesium/Cesium'
      }
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'node_modules/cesium/Build/Cesium/Workers',
            to: 'Workers'
          },
          {
            from: 'node_modules/cesium/Build/Cesium/ThirdParty',
            to: 'ThirdParty'
          },
          {
            from: 'node_modules/cesium/Build/Cesium/Assets',
            to: 'Assets'
          },
          {
            from: 'node_modules/cesium/Build/Cesium/Widgets',
            to: 'Widgets'
          }
        ]
      })
    ],
    module: {
      unknownContextCritical: false,
      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
    }
  },
  chainWebpack: (config) => {
    config.module
      .rule('cesium')
      .test(/\.js$/)
      .include.add(/node_modules\/cesium/)
      .end()
      .use('babel')
      .loader('babel-loader')
      .end()
  }
}

在组件中使用

vue
<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import * as Cesium from 'cesium/Cesium'

export default {
  name: 'CesiumViewer',
  mounted() {
    const viewer = new Cesium.Viewer('cesiumContainer')
    viewer.entities.add({
      name: 'test',
      position: Cesium.Cartesian3.fromDegrees(-74.0707383, 40.7117244),
      model: {
        uri: './models/Cesium_Air.glb'
      }
    })
  }
}
</script>

其中，./models/Cesium_Air.glb是你的glb模型文件路径。需要注意的是，如果你的glb模型中有纹理图片，需要将纹理图片放到与glb文件同级的目录下，并在模型加载时指定正确的纹理路径。