Vue-Cli3中集成Cesium 1.63.1

Vue中集成Cesium目前有两种方式

1：直接引用Cesium

  手段是在vue项目中修改 public/index.html文件，直接引用cesium.js和widgets.css。
  其中直接引用的方式又可以分为两种，引用在线的文件或引用本地的文件。

1.1 引用在线文件

  这里直接引用官网的文件地址

1.2 引用本地文件

官网上直接下载的源码包解压后找到 Build\Cesium目录，如下。
直接将Cesium文件夹拷贝到vue项目的public目录下。

然后修改引用的连接地址为：


copy后目录结构，如下：

这样就可以了。
这种是最简单的集成办法，没有之一.
且使用Cesium时候可以用
Cesium.Viewer()这种方式创建对象.
跟以前的写法一致，借鉴别人的代码也改动量最小。

2 使用npm安装后集成

这里的环境是Vue Cli3+Cesium1.63.1
Cesium1.63.1把Cesium.js文件改成了es6的写法，但是核心文件还没有改动。
集成到项目中后Cesium对象的使用方式也会发生变化。
这种集成办法好处是不用修改public/index.html，缺点是要该vue的配置文件。

2.1 安装

npm install cesium -S 安装最新版本即可

2.2 vue Cli3配置

配置文件是 vue.config.js，跟2不一样，如果没有文件在项目根目录下新建一个即可
其实Cesium1.63.1的npm安装包里面已经处理了cesium的导出模块，在cesium模块的index.js文件中，如下

/*eslint-env node*/
'use strict';
var path = require('path');
// If in 'production' mode, use the combined/minified/optimized version of Cesium
if (process.env.NODE_ENV === 'production') {
    module.exports = require(path.join(__dirname, 'Build/Cesium/Cesium'));
    return;
}
module.exports = require('esm')(module)('./Source/Cesium.js');

这样其实已经可以在项目中import方式使用cesium了.
但是呢Cesium所依赖的静态资源这样子是使用不了的，比如球的默认数据。
这样就需要使用copy-webpack-plugin插件将Cesium包下的资源映射到需要的uri上

2.3 npm install copy-webpack-plugin 安装copy插件

在vue.config.js顶部声明
const CopyPlugin = require('copy-webpack-plugin');
修改
module.exports={
chainWebpack: (config) => {
    	config.plugin('define').tap(args => {
    	  args[0].CESIUM_BASE_URL = JSON.stringify(process.env.NODE_ENV === 		'production' ? 'earth/static' : 'static')
      return args
    })
    config.resolve.alias
      .set('@', resolve('src'))
  },
  configureWebpack: {
    plugins: [new CopyPlugin([
      {from: 'node_modules/cesium/Build/Cesium/Assets', to: 'static/Assets'},
      {from: 'node_modules/cesium/Build/Cesium/Widgets', to: 'static/Widgets'},
      {from: 'node_modules/cesium/Build/Cesium/Workers', to: 'static/Workers'},
      {from: 'src/assets', to: 'assets'}
    ])]
  }
}

第一部分是修改默认的define插件，将Cesium的CESIUM_BASE_URL值修改成自己想要的.
define插件还有另外的方式修改,比如plugins覆盖
第二部分是使用copy插件做资源映射,copy插件的写法也有多重.
自己了解一下。
完整的配置文件如下

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/earth/' : './',
  assetsDir: 'static',
  lintOnSave: false,
  filenameHashing: false,
  productionSourceMap: false,
  chainWebpack: (config) => {
    config.plugin('define').tap(args => {
      args[0].CESIUM_BASE_URL = JSON.stringify(process.env.NODE_ENV === 'production' ? 'earth/static' : 'static')
      return args
    })
    config.resolve.alias
      .set('@', resolve('src'))
  },
  devServer: {
    overlay: {
      warnings: false,
      errors: false
    }
  },
  configureWebpack: {
    plugins: [new CopyPlugin([
      {from: 'node_modules/cesium/Build/Cesium/Assets', to: 'static/Assets'},
      {from: 'node_modules/cesium/Build/Cesium/Widgets', to: 'static/Widgets'},
      {from: 'node_modules/cesium/Build/Cesium/Workers', to: 'static/Workers'},
      {from: 'src/assets', to: 'assets'}
    ])]
  }
}

2.4 引入样式

在main.js文件中引入widgets.css样式文件,当然也可以在其他文件中引用
import 'cesium/Source/Widgets/widgets.css'

2.5 import 使用Cesium

这种集成方式可以在代码中直接import cesium某一个类，如
import {CameraEventType, Math, Viewer} from 'cesium'
而不需要像之前的Cesium.Viewer方式创建对象了。