关于VUE引入Cesuim遇到的那些坑

最近用VUE在做项目，加上自己是学GIS，最近的三维GIS比较火，所以就准备将Cesuim引入VUE框架。

话不多说，百度

1.安装cesuim
npm install cesium --save
2.webpack 配置

a.build/webpack.base.conf.js 文件中添加 Cesium module name
resolve: {
    alias: {
        // Cesium module name
        cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
    }
}
b.build/webpack.dev.conf.js 文件中添加 static files 管理
plugins: [
        ...
        // Copy Cesium Assets, Widgets, and Workers to a static directory
        new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
        new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
        new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
        new webpack.DefinePlugin({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('')
        })
    ],
c.build/webpack.base.conf.js 文件中添加
module: {
    unknownContextCritical: false,
    unknownContextRegExp: /^.\/.*$/,
    ...
}
3.配置结束后，开始写关于Cesuim有关组件，我是这么写的
<template>
  <div>
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
  import 'cesium/Widgets/widgets.css'
  import Cesium from 'cesium/Cesium'
  // 导出组件
  export default {
    name: "home",
    data() {
      return {};
    },
    mounted () {
      this.$nextTick(() => {
        const viewer = new Cesium.Viewer('cesiumContainer')
        console.log('viewer: ', viewer)
      })
    },

  };
</script>

<style scoped>

  #cesiumContainer {
    width: 100%;
    height: 100%;
  }

</style>
4.写完后开始运行，但是很遗憾，结果是这样

F12，看了一下，提示 "TypeError: Cannot read property 'Viewer' of undefined"，所以很疑惑为啥没有引入Cesuim成功

5.又从网上百度查了一下问题，发现要把Cesuim.js引入到index.html页面上,所有我又重新试了一下

又试了一下，还是空白，所以我又调式，发现一个很奇怪的现象就是我引入的cesuim.js文件居然没有成功，他的文件路径已经返回体居然是这样

6.继续百度，发现第三方的css或者js需要放在和src同级的static文件夹下然后再在index.html里引用才会有效，可能会有人问why？其实我也不太明白，大概百度了一下，说是config配置里做的操作

所以我又把Cesuim文件重新换到static文件夹下面，改一下路径，重新跑一下，果然