基于Webpack的Cesium+Vue应用（不推荐）

这是一篇关于如何通过Webpack的配置快速将Vue-cli脚手架与Cesium库整合，最终目的是可以使用Vue+Cesium进行组合编写代码，并可以正确打包Cesium的代码。(百度cesium vue或直接参考https://blog.csdn.net/m0_37972557/article/details/79768408网站)
Vue版本2.5.17，Cesium版本1.50.0。

1、利用Vue-cli脚手架生成标准项目结构，具体过程不赘述了。生成的项目结构如下图所示：

image.png

2、安装Cesium库

执行命令：npm install cesium（或cnpm install cesium --save）

3、手动复制Cesium编译好的静态文件到static文件夹中

进入node_modules\cesium\Build文件夹中，将编译好的Cesium文件复制到根目录下的static中，并把其中的Cesium.js删除

4、设置Webpack的配置项，使其支持Cesium 。

4.1、在build/webpack.base.conf.js下的output中加入sourcePrefix: ' '，让Webpack正确缩进多行字符串。

output: {
    path: config.build.assetsRoot，
    filename: '[name].js'，
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath，
    sourcePrefix: ' '
 }

4.2、在build/webpack.base.conf.js下的module中加入unknownContextCritical: false，让Webpack打印载入特定库时候的警告。

4.3、在build/webpack.base.conf.js下的module中加入unknownContextRegExp: /^./.*$/，为了解决Error: Cannot find module "."该错误

module: {
    rules: [
     .....
    ]，
    unknownContextRegExp: /^.\/.*$/,
    unknownContextCritical: false
  }

5、编写Vue组件

5.1、在components目录下新建MainViewer.vue组件，内容如下：

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

        </div>
        <CesiumViewer v-if="viewer" :viewer="viewer"></CesiumViewer>
    </div>
</template>

<script>

    import Cesium from 'cesium/Source/Cesium.js'
    import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
    import "cesium/Source/Widgets/widgets.css";

    import CesiumViewer from './CesiumViewer.vue'

export default {
  name: 'MainViewer',
    components:{CesiumViewer},
  data () {
    return {
        viewer:''
    }
  },
    mounted:function(){
        //设置静态资源目录
        buildModuleUrl.setBaseUrl('../../static/Cesium/');
        //创建viewer实例
        this.viewer = new Cesium.Viewer('cesiumContainer',{
            animation: false,
            baseLayerPicker: false,
            fullscreenButton: false,
            geocoder: false,
            homeButton: false,
            sceneModePicker: false,
            selectionIndicator: false,
            timeline: false,
            navigationHelpButton: false,
            infoBox: false,
            navigationInstructionsInitiallyVisible: false
        });
        this.viewer._cesiumWidget._creditContainer.style.display = "none";  //去掉logo
    }
}
</script>


<style scoped>
    #mainDiv{
        width:100%;
        height:100%;
    }
    #cesiumContainer{
        width:100%;
        height:100%;
    }
</style>

5.2、在components目录下新建CesiumViewer.vue组件，内容如下：

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

<script>
export default {
  name: 'CesiumViewer',
    props:['viewer'],
  data () {
    return {

    }
  },
    mounted:function(){
      console.log(this.viewer);
      console.log("在这里进行Cesium和viewer的操作！");
    }
}
</script>

<style scoped>

</style>

5.3、修改路由文件index.js

import Vue from 'vue'
import Router from 'vue-router'

import MainViewer from '../components/MainViewer.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'MainViewer',
      component: MainViewer
    }
  ]
})

6、启动项目：npm start

image.png

最后编辑于：2019.04.25 17:18:25