Vue+Cesium加载3DTiles遇问题：Cesium未定义、加载失败等

先理清你的两种引入方式为啥踩坑 #

• 直接在public/index.html引入Cesium：虽然能通过window.Cesium调用基础API，但Cesium的**资源文件（如workers、3DTiles解析器、shaders）**路径没和Vue项目的静态资源路径绑定，加载3DTiles时找不到依赖文件，自然加载失败。
• 直接在main.js里import Cesium from 'cesium'：Cesium的模块结构不是标准ES模块，webpack默认解析会报错，导致服务器启动失败。

正确的集成步骤（npm安装+webpack配置） #

1. 安装Cesium依赖 #

打开终端执行：

npm install cesium --save

2. 配置vue.config.js（关键！） #

如果项目根目录没有vue.config.js，新建一个，粘贴以下配置：

const { defineConfig } = require('@vue/cli-service')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')

// Cesium资源路径
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        // 设置Cesium别名，方便引用
        cesium: path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [
      // 复制Cesium的资源文件到静态目录
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
          { from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }
        ]
      })
    ],
    // 屏蔽Cesium非标准模块的解析报错
    module: {
      unknownContextCritical: false
    }
  },
  // 配置Cesium的全局资源路径
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0].CESIUM_BASE_URL = JSON.stringify('')
      return args
    })
  }
})

注：如果是Vue3+vite项目，配置逻辑类似但需改为vite.config.js的写法，可自行调整资源复制和路径配置。

3. 在组件中正确使用Cesium #

不需要全局引入，在需要的组件里按需引入：

<template>
  <div id="cesiumContainer" style="width: 100%; height: 600px;"></div>
</template>

<script>
// 引入Cesium核心模块
import * as Cesium from 'cesium'
// 引入Cesium自带样式
import 'cesium/Widgets/widgets.css'

export default {
  mounted() {
    // 初始化Cesium Viewer
    const viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayerPicker: false,
      homeButton: false
    })
    // 加载3DTiles（替换成你的资源地址）
    viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(96188) // 这里用Cesium官方示例资源，可替换为本地或你的远程资源
      })
    )
  }
}
</script>

4. 验证效果 #

重启Vue开发服务器，正常情况下能加载Cesium地球，3DTiles也能正常显示。

额外注意事项 #

• 不要同时混用index.html引入和npm安装的Cesium，会导致冲突。
• 如果用本地3DTiles资源，要把资源放在public目录下，或配置webpack正确复制路径，避免跨域或路径找不到的问题。
• 新人可以先从Cesium官方的3DTiles示例入手，确认资源本身没问题，再排查项目配置问题。

内容的提问来源于stack exchange，提问作者user22427668