如何在Vue项目中配置Vite以静态文件形式托管CesiumJS目录？

你的问题出在Cesium静态资源的路径配置和构建/开发环境的资源托管逻辑不匹配，之前的设置没有正确把Cesium的核心资源映射到项目的访问路径上。以下是具体的修复步骤：

1. 安装资源复制插件 #

首先安装vite-plugin-static-copy，它能帮我们在构建时自动复制Cesium的静态资源到输出目录：

npm install vite-plugin-static-copy --save-dev

2. 修改Vite配置文件 #

更新vite.config.js，配置资源复制、路径别名和开发服务器权限：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    // 构建时复制Cesium核心静态资源到输出目录的cesium文件夹下
    viteStaticCopy({
      targets: [
        {
          src: path.resolve(__dirname, 'node_modules/cesium/Build/Cesium/Assets'),
          dest: 'cesium'
        },
        {
          src: path.resolve(__dirname, 'node_modules/cesium/Build/Cesium/Widgets'),
          dest: 'cesium'
        },
        {
          src: path.resolve(__dirname, 'node_modules/cesium/Build/Cesium/Workers'),
          dest: 'cesium'
        },
        {
          src: path.resolve(__dirname, 'node_modules/cesium/Build/Cesium/ThirdParty'),
          dest: 'cesium'
        }
      ]
    })
  ],
  resolve: {
    // 配置Cesium的路径别名，方便项目中导入
    alias: {
      cesium: path.resolve(__dirname, 'node_modules/cesium')
    }
  },
  server: {
    // 允许开发服务器访问node_modules中的Cesium资源
    fs: {
      allow: ['node_modules/cesium']
    }
  }
})

3. 修正CESIUM_BASE_URL #

修改src/main.js中的Cesium基础路径，让它指向我们托管静态资源的目录：

window.CESIUM_BASE_URL = '/cesium/'

为什么之前的配置无效？ #

• 你之前设置的CESIUM_BASE_URL = ''会让Cesium从根路径请求资源，但serveStatic中间件的挂载逻辑和Vite自身的静态资源处理存在冲突，导致资源无法被正确访问。
• serveStatic仅在开发环境生效，生产构建后Cesium的静态资源不会被自动复制到输出目录，部署后仍会出现404。
• 直接复制Cesium官方指定的四个核心目录（Assets/Widgets/Workers/ThirdParty）到项目静态资源目录，能确保开发和生产环境的资源路径完全一致。

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