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' //会出现错误