开源cesium

Vue 引入 Cesium 碰到的大坑

2020-10-20  本文已影响0人  RulerMike

由于项目需要需要使用到 Vue + Cesium,过程中碰到问题花了很长时间解决,希望帮到有同样问题的朋友。

如果使用 npm 包安装和使用 Cesium 的话通常会在 vue.config.js 里配置:

configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium/Workers',
          to: 'cesium/Workers'
        }
      ]),
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium/ThirdParty',
          to: 'cesium/ThirdParty'
        }
      ]),
      new CopyWebpackPlugin([
        { from: 'node_modules/cesium/Build/Cesium/Assets', to: 'cesium/Assets' }
      ]),
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium/Widgets',
          to: 'cesium/Widgets'
        }
      ]),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify('./cesium')
      })
    ],
}

这样去引入 Cesium 项目所需的依赖,资源是没有问题的,问题在于当需要用到 Cesium 变量的时候需要去引用 node_module/cesium/Source 下的 Cesium.js,用这种方式引入源码才不会在使用 Cesium 变量时出现各种各样奇怪的报错。

import * as Cesium from 'cesium/Source/Cesium'  //正确
import * as Cesium from 'cesium/Build/Cesium/Cesium' //会出现错误 
上一篇下一篇

猜你喜欢

热点阅读