VUE_CLI4.5 VUE+Cesium

1、VUE_CLI安装VUE项目

2、安装cesium依赖

npm install cesium

本人目前cesium 版本1.82.1

3、配置vue.config.js

/*
 * @Author: your name
 * @Date: 2020-10-30 17:25:40
 * @LastEditTime: 2021-05-19 21:55:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-demo\vue.config.js
 */
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

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


module.exports = {
  // 基本路径  3.6之前的版本时 baseUrl
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // webpack-dev-server 相关配置
  devServer: {
    proxy: {
      '/try': {
        target: 'https://www.runoob.com',
        ws: true,
        changeOrigin: true
      },
      '/yuxi_DEM': {
        target: 'http://yxgis2sim.hdec.com',
        ws: true,
        changeOrigin: true
      },
      '/iserver': {
        target: 'http://yxgis2sim.hdec.com',
        ws: true,
        changeOrigin: true
      },
      '/testt': {
        target: 'http://localhost:8081',
        ws: true,
        changeOrigin: true
      },
      // '/ismap-mvt-ShenSeDiTu1231erver': {
      //   target: 'http://gisct.ecidi.com/iserver/services',
      //   ws: true,
      //   changeOrigin: true
      // },
      '/map-mvt-ShenSeDiTu1231': {
        target: 'http://gisct.ecidi.com/iserver/services',
        ws: true,
        changeOrigin: true
      },
      '/yuxiBasemap': {
        target: 'http://yxgis2.hdec.com',
        ws: true,
        changeOrigin: true
      },
      '/geoserver': {
        target: 'http://localhost:8088',
        ws: true,
        changeOrigin: true
      },
      '/UserController': {
        target: 'http://localhost:8080',
        ws: true,
        changeOrigin: true
      }
      // '/foo': {
      //   target: '<other_url>'
      // }
    }
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    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 CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false
    }
  }
}

4、配置main.js全局引入cesium相关文件

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/element.js";
 
Vue.config.productionTip = false;
 
//引入cesium相关文件
var cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');
 
Vue.prototype.cesium = cesium
Vue.prototype.widgets = widgets
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

5、修改Hone.vue

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
 
<script>
export default {
  name: 'Home',
  mounted(){
    this.init()
  },
  methods: {
    init() {
      let Cesium = this.cesium
      let viewer = new Cesium.Viewer('cesiumContainer');
      viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
    }
  }
};
</script>
 
<style lang='scss' scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
} 
</style>