如何在Vite项目中排除https包以解决Cesium引入报错？

问题复现 #

1. 初始化项目：

yarn create vite my-vue-app --template vue
cd my-vue-app
yarn add cesium vite-plugin-cesium vite -D

2. 更新vite.config.js：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
import path from 'path'

export default defineConfig({
  plugins: [vue(), cesium()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

3. 在HelloWorld.vue中引入Cesium：

import * as Cesium from 'cesium'

4. 执行yarn dev时出现浏览器环境不存在的https包被Cesium引用的解析错误。

尝试过的无效配置 #

• 添加build.rollupOptions.external：

build: {
    rollupOptions: {
        external: ['https', 'http', 'url', 'zlib']
    }
  },

• 添加optimizeDeps.exclude：

optimizeDeps: {
    exclude: ['https'],
  },

解决方案 #

方案1：通过resolve.alias映射到Cesium兼容模块 #

修改vite.config.js，在resolve.alias中添加Node内置模块的映射，指向Cesium自带的兼容实现：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
import path from 'path'

export default defineConfig({
  plugins: [vue(), cesium()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      'https': path.resolve(__dirname, 'node_modules/cesium/Build/Cesium/ThirdParty/requirejs/require.js'),
      'http': path.resolve(__dirname, 'node_modules/cesium/Build/Cesium/ThirdParty/requirejs/require.js'),
      'zlib': path.resolve(__dirname, 'node_modules/cesium/Build/Cesium/ThirdParty/requirejs/require.js'),
      'url': path.resolve(__dirname, 'node_modules/cesium/Build/Cesium/ThirdParty/requirejs/require.js')
    }
  },
  define: {
    CESIUM_BASE_URL: JSON.stringify('/cesium')
  }
})

方案2：使用rollup-plugin-node-polyfills提供浏览器polyfill #

1. 安装依赖：

yarn add rollup-plugin-node-polyfills -D

2. 更新vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
import path from 'path'
import nodePolyfills from 'rollup-plugin-node-polyfills'

export default defineConfig({
  plugins: [
    vue(),
    cesium(),
    nodePolyfills({
      include: ['https', 'http', 'url', 'zlib']
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  define: {
    CESIUM_BASE_URL: JSON.stringify('/cesium')
  }
})

说明 #

Cesium内部会引用Node.js环境特有的内置模块，这些模块在浏览器中不存在，导致解析错误。上述两种方案分别通过映射到Cesium自带的兼容实现、提供浏览器可用的polyfill来解决问题，同时CESIUM_BASE_URL配置确保Cesium资源路径正确。

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