Vue中部署Cesium

1、下载Cesium

在创建好的Vue项目目录下，输入命令：

npm install cesium

安装成功之后，在项目目录下的node_modules下会有cesium文件夹。

2、配置cesium

在项目目录下，会有一个vue.config.js的文件。

然后对该文件进行改写为：

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: './',
  outputDir:'dist',
  assetsDir:'static',
  lintOnSave: false,
  devServer: {
    port: 8083,
  },
  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({patterns: [{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers'}]}),
      new CopyWebpackPlugin({patterns: [ { from: path.join(cesiumSource, 'Assets'), to: 'Assets'}]}),
      new CopyWebpackPlugin({patterns: [ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets'}]}),
      new CopyWebpackPlugin({patterns: [ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers'}]}),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./')
      }),
     
    ],
    module: {
      
      unknownContextCritical: false
    }
  }
}

对main.js进行修改:

var Cesium = require('Cesium/Cesium.js')
var Widgets = require('Cesium/Widgets/widgets.css')

Vue.config.productionTip = false

new Vue({
  router,
  store,
  Cesium,
  Widgets,
  render: h => h(App)
}).$mount('#app')

在components中的.vue要使用cesium前要进行调用，命令为：

<script>
import * as Cesium from 'Cesium/Cesium'


</script>

最后即可配置成功。