關於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文件夾下面，改一下路徑，重新跑一下，果然