Cesium在1.63进行了一次重大重构，项目从AMD模块转向原生JS ES6模块，具体可以查看官方博客CesiumJS Migrates to ES6 Modules ，所以以前老的Vue整合Cesium的方式都没法用了，这里是新版本整合方式。

一、首先还是安装必要依赖，和普通vue项目一样添加上Cesium最新版本。注意devDependencies中和老版本一样要增加一个copy-webpack-plugin用于拷贝Cesium的一些静态资源。

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "cesium": "^1.84.0",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "copy-webpack-plugin": "^6.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

二、配置vue.config.js，增加Cesium打包的一些配置，如拷贝静态资源、定义CESIUM_BASE_URL打包常量等。

const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  publicPath: '/demo',
  productionSourceMap: false,
  configureWebpack: {
    plugins: [
      // Copy Cesium Assets, Widgets, and Workers to a static directory
      new CopyWebpackPlugin({
        patterns: [
          { from: 'node_modules/cesium/Build/Cesium/Workers', to: 'Workers' },
          { from: 'node_modules/cesium/Build/Cesium/ThirdParty', to: 'ThirdParty' },
          { from: 'node_modules/cesium/Build/Cesium/Assets', to: 'Assets' },
          { from: 'node_modules/cesium/Build/Cesium/Widgets', to: 'Widgets' }
        ]
      }),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify('')
      })
    ],
    module: {
      // 解决Cesium 构建warning Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
      unknownContextCritical: false,
      unknownContextRegExp: /\/node_modules\/cesium\/Source\/Core\/buildModuleUrl\.js/
    }
  }
}

三、main.js全局引入Cesium Widgets 样式。

import 'cesium/Build/Cesium/Widgets/widgets.css'

四、修改以前Cesium引入方式。

// 修改以前Cesium引入方式：import Cesium from 'cesium/Cesium' 为
import * as Cesium from 'cesium'
// 现在你也可以单独引入Cesium的某个类
import { Billboard } from 'cesium'

伍、Demo。

<template>
  <div id="map"></div>
</template>
<script>
import * as Cesium from 'cesium'

export default {
  name: 'About',
  data () {
    return {
      $_viewer: null
    }
  },
  mounted () {
    this.$_viewer = new Cesium.Viewer('map')
  }
}
</script>
<style lang="scss" scoped>
#map{
  width: 100%;
  height: 100%;
}
</style>