搭建项目脚手架省略...

运行下载cesium依赖包：

npm install cesium --save

修改build/webpack.base.conf.js文件

const cesiumSource = '../node_modules/cesium/Source'   //添加

//在modules.exports模块中添加 
 amd: {
    toUrlUndefined: true
   },

//在modules.exports模块中的output里添加
 sourcePrefix: ' ',

//在modules.exports模块中的resolve里的alisa里添加
 'cesium': path.resolve(__dirname, cesiumSource)

//在module模块中加入
 unknownContextCritical: false

修改 build/webpack.dev.conf.js 文件

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

//在plugins模块中加入
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({
      CESIUM_BASE_URL: JSON.stringify('')
    })

修改build/webpack.prod.conf.js 文件

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

//在plugins 模块中添加
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({
      CESIUM_BASE_URL: JSON.stringify('./')
    })

修改config/index.js 文件

//将 assetsPublicPath的值设置为空
assetsPublicPath: '',

复制node_modules的Cesium文件夹粘贴到根目录的 static文件夹里

首先到  node_modules/cesium/Build/Cesium 文件，可以看到里面还有四个文件夹和Cesiumjs，直接复制Cesium文件夹 粘贴到 根目录的 static文件夹里

首页script引入·

 <script src="/static/Cesium.js"></script>

页面使用

  <div class="boxs" id="cesiumContainer"></div>
import '../../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
  mounted() {
   this.init()
     },
  methods: {
     init(){
     this.viewer = new Cesium.Viewer('cesiumContainer',{})
    },

使用绘制矩形框，视角为“中国”

<template>
  <div class="indexPath" style="height:600px;">
    <button @click="getFO">按钮</button>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
      <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {
    var czml = [
      {
        id: "document",
        name: "CZML Colors",
        version: "1.0"
      },
      {
        id: "rgba",
        name: "Rectangle with outline using RGBA Colors",
        rectangle: {
          coordinates: {
            wsenDegrees: [100, 40, 110, 50]
          },
          fill: true,
          material: {
            solidColor: {
              color: {
                rgba: [255, 0, 0, 100]
              }
            }
          },
          height: 0, // disables ground clamping, needed for outlines
          outline: true,
          outlineColor: {
            rgba: [0, 0, 0, 255]
          }
        }
      }
      // {
      //   id: "rgbaf",
      //   name: "Rectangle using RGBAF Colors",
      //   rectangle: {
      //     coordinates: { wsenDegrees: [-100, 40, -80, 50] },
      //     fill: true,
      //     material: {
      //       solidColor: {
      //         color: {
      //           rgbaf: [1, 0, 0, 0.39]
      //         }
      //       }
      //     },
      //     height: 0, // disables ground clamping, needed for outlines
      //     outline: true,
      //     outlineColor: {
      //       rgba: [0, 0, 0, 255]
      //     }
      //   }
      // }
    ];

    var viewer = new Cesium.Viewer("cesiumContainer", {
      sceneModel: Cesium.SceneMode.SCENE2D,
      fullscreenButton: false,
      animation: false, //是否显示动画控件
      baseLayerPicker: false, //是否显示图层选择控件
      geocoder: true, //是否显示地名查找控件
      timeline: false, //是否显示时间线控件
      sceneModePicker: true, //是否显示投影方式控件
      navigationHelpButton: false, //是否显示帮助信息控件
      infoBox: true //是否显示点击要素之后显示的信息
    });

    var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
    viewer.dataSources.add(dataSourcePromise);
    viewer.zoomTo(dataSourcePromise);
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 4000000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: Cesium.Math.toRadians(0)
      }
    });
  },
  methods: {}
};
</script>
<style scoped>
.indexPath {
  width: 100%;
  height: 500px;
  border: 1px solid red;
}
@import url(../templates/bucket.css);
</style>

使用地理坐标进行贴图：

<template>
  <div class="indexPath" style="height:600px;">
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
      <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {
    var viewer = new Cesium.Viewer("cesiumContainer");

    // viewer.entities.add({
    //     id : 'Red rectangle, zIndex 1',
    //     rectangle : {
    //         coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -100.5, 30.0),
    //         material : Cesium.Color.RED,
    //         zIndex: 1
    //     }
    // });

    viewer.entities.add({
      id: "Textured rectangle, zIndex 2",
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(100, 40, 110, 50),
        material: "https://f11.baidu.com/it/u=356916496,2042372566&fm=76",
        zIndex: 2
      }
    });

    // viewer.entities.add({
    //     id : 'Blue rectangle, zIndex 3',
    //     rectangle : {
    //         coordinates : Cesium.Rectangle.fromDegrees(-110.0, 31.0, -100.5, 41.0),
    //         material : Cesium.Color.BLUE,
    //         zIndex: 3
    //     }
    // });

    // viewer.entities.add({
    //     id : 'Textured rectangle, zIndex 3',
    //     rectangle : {
    //         coordinates : Cesium.Rectangle.fromDegrees(-99.5, 20.0, -90.0, 30.0),
    //         material : '../images/Cesium_Logo_Color.jpg',
    //         zIndex: 3
    //     }
    // });

    // viewer.entities.add({
    //     id : 'Green rectangle, zIndex 2',
    //     rectangle : {
    //         coordinates : Cesium.Rectangle.fromDegrees(-97.5, 25.0, -88.0, 35.0),
    //         material : Cesium.Color.GREEN,
    //         zIndex: 2
    //     }
    // });

    // viewer.entities.add({
    //     id : 'Blue rectangle, zIndex 1',
    //     rectangle : {
    //         coordinates : Cesium.Rectangle.fromDegrees(-99.5, 31.0, -90.0, 41.0),
    //         material : Cesium.Color.BLUE,
    //         zIndex: 1
    //     }
    // });

    if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
      window.alert(
        "Polylines on terrain are not supported on this platform, Z-index will be ignored"
      );
    }

    if (!Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(viewer.scene)) {
      window.alert(
        "Textured materials on terrain polygons are not supported on this platform, Z-index will be ignored"
      );
    }

    // viewer.entities.add({
    //     id : 'Polyline, zIndex 2',
    //     polyline : {
    //         positions : Cesium.Cartesian3.fromDegreesArray([
    //             -120.0, 22.0,
    //             -80.0, 22.0
    //         ]),
    //         width : 8.0,
    //         material : new Cesium.PolylineGlowMaterialProperty({
    //             glowPower : 0.2,
    //             color : Cesium.Color.BLUE
    //         }),
    //         zIndex: 2,
    //         clampToGround : true
    //     }
    // });

    viewer.zoomTo(viewer.entities);

    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 4000000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: Cesium.Math.toRadians(0)
      }
    });
  },
  methods: {}
};
</script>
<style scoped>
.indexPath {
  width: 100%;
  height: 500px;
  border: 1px solid red;
}
@import url(../templates/bucket.css);
</style>