本文主要講解vue2.x與cesium的結(jié)合，主要參考cesium官網(wǎng)教程（Cesium and Webpack）和github下的cesium-vue項(xiàng)目。

1、使用vue-cli腳手架新建vue項(xiàng)目（vue init webpack 項(xiàng)目名稱），引入cesium模塊（cnpm install cesium）

image.png

2、修改webpack下的3個(gè)配置文件：webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。具體如下：

1、修改webpack.base.conf.js文件

(1)增加代碼

image.png

const cesiumSource = '../node_modules/cesium/Source';       

（2）增加代碼

image.png

    sourcePrefix: ''

    amd: {                                    //flag
        // Enable webpack-friendly use of require in Cesium
        toUrlUndefined: true
    },

(3)增加代碼

image.png

'cesium': path.resolve(__dirname, cesiumSource)

(4)增加代碼

image.png

{
            //Strip cesium pragmas 刪除編譯指示               //flag
            test: /\.js$/,
            enforce: 'pre',
            include: path.resolve(__dirname, cesiumSource),
            use: [{
                loader: 'strip-pragma-loader',
                options: {
                    pragmas: {
                        debug: false
                    }
                }
            }]
        },

(5)增加代碼

image.png

unknownContextCritical: false  //屏蔽警告

2、修改webpack.dev.conf.js文件

(1)增加代碼

image.png

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

(2)增加代碼

image.png

'CESIUM_BASE_URL': JSON.stringify('') 

(3)增加代碼

image.png

      new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),     //flag
      new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
      new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),

3、修改webpack.prod.conf.js文件

（1）增加代碼

image.png

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

(2)增加代碼

image.png

'CESIUM_BASE_URL': JSON.stringify('static')

(3)增加代碼

image.png

      new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'static/Workers' } ]),//flag
      new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'static/Assets' } ]),
      new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'static/Widgets' } ]),

3、測試

cesiumViewer.vue代碼：

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

<script>
    import Cesium from 'cesium/Cesium';
    import widgets from 'cesium/Widgets/widgets.css';

    export default {
        name: 'cesiumContainer',
        mounted(){
            var viewer = new Cesium.Viewer('cesiumContainer');
        }
    }
</script>

<style scoped>
</style>