win10在vuecli4中安裝cesium并建立項目

1.安裝node.js和vue/cli

參考

https://developer.aliyun.com/article/765620

2.安裝cesium

cesium是一個開源的世界級三維地理JavaScript庫，它具有性能優異、精度高、可視化效果好和容易上手等特點，來自航空、智慧城市和無人機等各行業的開發者都在使用cesium來建立可互動的網際網路應用，分享動态的地理資料

npm install --save cesium --registry=

https://registry.npm.taobao.org

3.安裝vs code和vs code插件

安裝VS Code插件：ESLint、Prettier - Code formatter、Vetur、Path Intellisense

4.vscode打開上一篇文章(

https://developer.aliyun.com/article/765620) 建立的test項目檔案夾

**5.在test項目根目錄建立vue.config.js.輸入以下内容并儲存為vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      unknownContextCritical: false
    }
  },
  chainWebpack: config => {
    config
      .plugin('define').tap(args => {
        args[0].CESIUM_BASE_URL = JSON.stringify('./')
        return args
      })
  }
}
           

6.在test項目的src檔案夾下修改App.vue.内容如下

<template>
  <div id="app">
    <CesiumViewer />
  </div>
</template>

<script>
import CesiumViewer from './components/CesiumViewer.vue'

export default {
  name: 'App',
  components: {
    CesiumViewer
  }
}
</script>

<style>

</style>           

7.在components下建立CesiumViewer.vue

<template>
<div id="cesiumContainer"></div>
</template>

<script>
import { Viewer } from 'cesium/Source/Cesium'
import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'
import 'cesium/Source/Widgets/widgets.css'

export default {
  name: 'CesiumViewer',
  mounted: function () {
    buildModuleUrl.setBaseUrl('static/')
    this.viewer = new Viewer('cesiumContainer')
  },
  data () {
    return {
      viewer: {}
    }
  }
}
</script>

<style scoped>
</style>           

8.運作項目(原文圖形界面可以顯示地球.我運作時無法顯示地球)

vs code下npm run serve