vue集成cesium的三种方式，以及解决底图变暗和LabelGraphics渲染不正确的问题
vue集成cesium常见的方式是通过webpack配置，但是也可以通过在html页面添加script标签的方式集成（个人觉得通过添加script标签的方式集成会好一些，因为cesium库比较复杂，如果通过webpack集成的方式在编译的时候相对会慢一些，影响开发体验），另外一种方式和添加script标签的方式比较类似，就是直接在main.js或者vue文件中Import cesium.js和widget.css，但是这种方式只导入了js文件和css文件还不能使用，因为cesium还有静态资源文件，所以还要通过Cesium类的buildModuleUrl API导入静态资源文件，静态资源可以直接拷贝过来放在static文件中，下面一一介绍下这三种集成方式。
第一种：
通过webpack集成cesium。
1，在webpack.base.conf 文件中添加
const cesiumSource = '../node_modules/cesium/Source' //导入cesium源码
2，output 对象下添加 sourcePrefix: ' '
3，module 对象下添加 unknownContextCritical: false
4，添加 amd: { toUrlUndefined: true }
5，node 对象下添加 fs: 'empty'
6，webpack.dev.conf 文件中添加以下代码
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
plugin 对象中添加以下代码（这个插件用于复制cesium的静态资源）
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' } ]),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
7，webpack.prod.conf 文件中添加以下代码
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
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' } ]),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('./')
})
到此，大功告成，npm run dev 启动即可。
第二种：
这种方式相对简单很多，不用在webpack里面配置，直接引入cesium.js 和 widget.css文件即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-project</title>
<link rel="stylesheet" href="static/Cesium/Widgets/widgets.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="static/Cesium/Cesium.js"></script>
</body>
</html>
注意：cesium.js文件一定要和静态资源放到一个文件中，如果没放到一个文件夹中会报错找不到静态资源，出现这种情况那就要自己配置静态资源的地址，通过 buildModuleUrl 这个API，上文已提到过，我一般是直接复制node_modules\cesium\Build\Cesium这个文件夹的所有文件到项目的static文件中。
个人推荐这种方式，不经过webpack，编译快，引入也简单。
第三种：
这种方式是直接在main.js或者vue文件中import即可
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
但是这样直接引入会提示找不到静态资源，所以还得通过 buildModuleUrl API 加载cesium的静态资源，添加以下代码即可：
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
buildModuleUrl.setBaseUrl('../static/Cesium/')
至此，大功告成，启动即可。
最后，有个问题说下，有次开发中通过直接添加 script 标签的方式引入cesium，在渲染label以及瓦片底图的时候，感觉label和底图的颜色明显不对，比正常的颜色明显暗了很多，字体也模糊了很多，后来才发现，cesium.js和widget.css这两个文件一定要是同一个版本编译的（但是也不确定是不是和静态资源有关系）。
因为当时手误引入了1.60版本的widget.css和1.61版本的cesium.js，所以导致底图颜色变暗以及label标签渲染模糊。