VUE+Cesium项目搭建

效果如下：

一、 安装cesium包

npm install cesium –save

二、 在build/webpack.dev.conf.js下配置参数

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 CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
new webpack.DefinePlugin({
  // 在cesium中定义加载资源的相对根路径
  CESIUM_BASE_URL: JSON.stringify('')
})

三、 在build/webpack.base.conf.js下，

module里添加

module: {
   rules: [...],
   unknownContextCritical: false,
}

四、 在main.js中添加如下代码

import Cesium from 'cesium/Cesium'
import widgets from 'cesium/Widgets/widgets.css'
 
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

配置添加完后重新安装一下 (npm install) 然后在启动

在组件中引用

<template>
  <div class="container">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted() {
      var Cesium = this.Cesium; 
      var viewer = new Cesium.Viewer("cesiumContainer");
    },
    methods: {}
  }
</script>

<style scoped>
  #cesiumContainer {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .container{
    width:100%;
    height:100%
  }
</style>