【VUE - 工具 - CESIUM】05、vuecli3+cesium 配置引入

一、vue-cli3+cesium

1、vue create 'your project-name' 新建你的项目

2、安装cesium依赖 npm install cesium --save

3、新建cesiumContainer.vue文件，src/views/cesiumContainer.vue

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

<script>
  // 哪个组件需要 在哪里引入 也可以在main.js全局引入
  /*
  全局：
	import Cesium from 'cesium/Cesium' 
    // noinspection ES6UnusedImports
  	import widget from 'cesium/Widgets/widgets.css'
  	在全局的mounted阶段：
  	this.$nextTick(() => {
      let viewer = new Cesium.Viewer('cesiumContainer')
    })
  */

  // 局部组件引用
  import Cesium from 'cesium/Cesium' 
  // noinspection ES6UnusedImports
  import widget from 'cesium/Widgets/widgets.css'
  export default {
    name: "cesiumContainer",
    mounted () {
      this.$nextTick(() => {
        this.cesiumInit()
      })
    },
    methods: {
      cesiumInit(){
        let viewer = new Cesium.Viewer('cesiumContainer');
      }
   }
 }
</script>

4、在router.js配置cesiumContainer组件路由

export default new Router({
  routes: [
    {
      path: '/',
      name: 'CComponent',
      component: () => import(/* webpackChunkName: "cesiumContainer" */ './views/cesiumContainer.vue')
    }
  ]
})

5、在App.vue使用全局样式

html, body, #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

6、最后一步配置：新建vue.config.js文件进行配置（和vuecli2差不多，但是vuecli3在一个文件中配置即可）

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
  publicPath: './',
  devServer: {
    port: 8080
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' ' // 1
    },
    amd: { // 2
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource) // 3
      }
    },
    plugins: [ // 4
      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({ // 5
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false // 6
    }
  }
}

经过以上步骤即可完成vuecli3+cesium初始化

cesium官网学习使用：