来源参考：
https://blog.csdn.net/m0_37972557/article/details/79768408?utm_source=copy

VUE中搭建cesium

基于Webpack将Vue-cli脚手架与Cesium库整合
Node.Js和Webpack安装等就不累述了，直接初始化一个Vue项目

安装Cesium环境

npm install cesium

Webpack配置

使用过Cesium的同学都知道它是一个非常复杂的库，很难去直接打包
我们无法通过在main.js中像引入Vue那样直接进行引入Cesium

• 手动复制Cesium编译好的静态文件到static文件夹中

进入node_modules\cesium\Build文件夹中，将编译好的Cesium文件复制到根目录下的static中，并把其中Cesium.js删除
完成后效果如下:

• 设置Webpack的配置项，使其支持Cesium

1.在build/webpack.base.conf.js下的output中加入sourcePrefix: ' '，让Webpack正确缩进多行字符串。

output: {
    path: config.build.assetsRoot，
    filename: '[name].js'，
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath，
    sourcePrefix: ' '
 }

2.在build/webpack.base.conf.js下的module中加入unknownContextCritical: false，让Webpack打印载入特定库时候的警告。
3.在build/webpack.base.conf.js下的module中加入unknownContextRegExp: /^./.*$/，为了解决Error: Cannot find module "."该错误

module: {
    rules: [
     .....
    ]，
    unknownContextRegExp: /^.\/.*$/，
    unknownContextCritical: false
  }

编写Vue组件

我们已经将Cesium所需要的静态资源打包并放到正确的位置了，但是Cesium并不知道如何找到他们，我们需要让Cesium知道它的静态资源存放在哪里。那么这里Cesium已经提供了一个API，就是buildModuleUrl函数。当完成这一步完成后我们就可以进行Vue+Cesium的正常开发了

• 新建一个cesiumViewer的组件

在src下新建一个名为cesiumViewer.vue的组件，代码如下:

<template>
    //放置Cesium的容器
    <div id="cesiumContainer"></div>
</template>

<script>
//导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
import Viewer from "cesium/Source/Widgets/Viewer/Viewer";
//我们刚才所说的如何让Cesium知道静态资源在哪里的API
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
//导入必须的样式表
import "cesium/Source/Widgets/widgets.css";

export default{
    name:"cesiumContainer"，
    mounted:function () {
        //设置静态资源目录
        buildModuleUrl.setBaseUrl('../static/Cesium/')
        //创建viewer实例
        this.viewer = new Viewer('cesiumContainer');
    }，
    data () {
        return {
            'viewer' : {}
        }
    }
}
</script>

<style scoped>

</style>

• 在App.vue中注册组件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import cesiumViewer from "./components/cesiumViewer.vue"
export default {
  name: 'App'，
  components : {
    'cesiumViewer' : cesiumViewer
  }
}
</script>

<style>
//保证浏览器全屏幕显示，没有多余的白边
html， body， #cesiumContainer {
 width: 100%; 
 height: 100%; 
 margin: 0; 
 padding: 0; 
 overflow: hidden;
}
#app {
  font-family: 'Avenir'， Helvetica， Arial， sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
</style>

• 修改router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import cesiumViewer from '@/components/cesiumViewer'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/'，
      name: 'cesiumViewer'，
      component: cesiumViewer
    }
  ]
})

运行项目以及打包项目

如果之前的工作都完成的话，我们退回到项目的根目录下运行npm run dev，整个项目就会正常启动了

而项目打包只需要运行npm run build就可以发现您的项目中多了个dist文件夹，关于dist文件夹生成的策略以及具体优化这里就不多做介绍了

后续改进Webpack配置

到目前为止，虽然最基本的配置已经完成，但是上述配置有些不妥的地方，并且有些同学可能不需要引入分割Cesium的模块进行开发,那么我们稍微进行一些改进

• 使用CopyWebpackPlugin对静态文件直接打包,而不是手动复制文件

1.首先将static文件夹中之前手动复制的文件删除
2.在webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js配置文件中定义Cesium的源代码路径和web Workers路径

const cesiumSource = '../node_modules/cesium/Source';
const cesiumWorkers = '../../Build/Cesium/Workers';

3.在webpack.base.conf.js配置文件中设置别名
4.在webpack.base.conf.js配置文件中配置amd参数

5.在webpack.dev.conf.js、webpack.prod.conf.js配置文件中引入CopyWebpackPlugin并配置插件功能

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

new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),

• Vue组件应该只干一件事情

1.修改main.js的代码,使其从入口处引入整个Cesium

2.修改App.vue组件

3.修改cesiumViewer组件

4.在webpack.dev.conf.js、webpack.prod.conf.js配置文件增加Cesium的静态路径配置