vue+cesium初始化地球時遇到問題

一、首先經過vue-cli構建項目，在你習慣的目錄下打開cmd輸入：

vue init webpack cesium-demo    我這裏的cesium-demo是我項目的名稱，後續一些構建項目的選項省略.....

二、而後在項目中安裝cesium框架： 

npm install cesium --save

三、webpack配置，build/webpack.base.conf.js 文件中添加

resolve: {
    alias: {
        // Cesium module name
        cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
    }
}

四、build/webpack.dev.conf.js 文件中添加

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('')
        })
    ]

五、main.js中配置

import Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";

Vue.prototype.Cesium = Cesium
Vue.config.productionTip = false

六、App.vue 中輸入如下代碼

美國俄亥俄州立OSU 美國紐約州立SBU 美國布蘭迪斯Brandeis 美國紐約州立大學石溪分校SBU 美國紐約州立大學水牛城分校 美國金門KU 美國愛荷華Iowa 美國新澤西理工學院Jersey 美國明尼蘇達大學雙城分校UMN 美國佩斯Pace 美國匹茲堡PITT 美國範德堡Vandy 美國喬治城Georgetow 美國丹佛DU 美國堪薩斯州立KSU 美國西雅圖城市CUS

<template>
  <div id="app">
    <div id="cesiumContainer"></div>
  </div>
</template>
    
<script>
export default {
  name: "App",
  mounted() {
    this.$nextTick(() => {
      const viewer = new this.Cesium.Viewer("cesiumContainer");
      console.log('viewer: ', viewer);
    });
  },
};
</script>
<style>
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#app,
#cesiumContainer {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

運行： npm run dev

項目運行起來以後報錯！！！

頁面以下，是個空白的