Vue3+CesiumJS+Webpack项目模块找不到错误修复咨询

AI 小北

2026-7-25

问题：Vue集成CesiumJS构建失败，缺少Node核心模块解析

项目背景

我有一个可复现问题的示例项目，创建步骤如下：

1. vue create vueces
1. 删除项目中不必要的文件
1. yarn add cesium

关键组件代码（HelloWorld.vue）

<template>
  <div ref="cesiumContainer" id="cesiumContainer">
    hello
  </div>
</template>

<script setup>
import { Viewer } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";

const viewer = new Viewer("cesiumContainer");

console.log("viewer", viewer);
</script>

<style scoped>
</style>

构建错误信息

Module not found: Error: Can't resolve 'url' in '/Users/eric/depot/tmp/vueces/node_modules/@cesium/engine/Source/Core'
Module not found: Error: Can't resolve 'zlib' in '/Users/eric/depot/tmp/vueces/node_modules/@cesium/engine/Source/Core'
Module not found: Error: Can't resolve 'https' in '/Users/eric/depot/tmp/vueces/node_modules/@cesium/engine/Source/Core'
Module not found: Error: Can't resolve 'http' in '/Users/eric/depot/tmp/vueces/node_modules/@cesium/engine/Source/Core'

错误提示说明：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }

已尝试的解决方案

我添加了webpack.config.js，内容如下：

module.exports = function (webpackEnv) {
  return {
    resolve: {
      fallback: {
        url: false,
        zlib: false,
        https: false,
        http: false,
      }
    }
  }
}

但错误仍然存在。