iview-admin 之 cesium

最近看到了一个后台管理开源项目iview-admin，就想着引入一些其他库用用，就先引入cesium,具体操作如下

在项目根目录执行 npm install cesium
(1)安装完成后 node_modules 下会增加 cesium 相应的文件夹
(2) 手动复制Cesium编译好的静态文件到static文件夹中

(3) 设置 webpack的配置项
3.1 在build/webpack.base.conf.js下的output中加入sourcePrefix: ’ '，让Webpack正确缩进多行字符串。

  output: {
        path: path.resolve(__dirname, '../dist/dist'),
        sourcePrefix: ' '
    },

3.2 在build/webpack.base.conf.js下的module中加入unknownContextCritical: false，让Webpack打印载入特定库时候的警告。
3.3 在build/webpack.base.conf.js下的module中加入unknownContextRegExp: /^./.*$/，为了解决Error: Cannot find module "."该错误

 {
            test: /\.(html|tpl|ejs)$/,
            loader: 'html-loader'
        }
    ],
    unknownContextRegExp: /^.\/.*$/,
    unknownContextCritical: false

(4) 编写Vue组件

<style lang="less">
</style>
<template>
   <div id="cesiumContainer"></div>
</template>
<script>
import Cesium from 'cesium/Source/Cesium.js';
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl";
//import Cesium from 'cesium/Build/Cesium/Cesium.js';
import "cesium/Build/Cesium/Widgets/widgets.css";
export default {
  name: 'cesiumContainer',
  mounted () {
    buildModuleUrl.setBaseUrl('../../static/Cesium/');
    var viewer = new Cesium.Viewer('cesiumContainer');
  }
};
</script>

(5) 配置路由 router/router.js 下增加vue 配置

   {
                path: 'count-to',
                icon: 'arrow-graph-up-right',
                name: 'count-to',
                title: '数字渐变',
                component: resolve => { require(['@/views/my-components/count-to/count-to.vue'], resolve); }
            },
            {
                path: 'cesiumContainer',
                icon: 'arrow-graph-up-right',
                name: 'cesiumContainer',
                title: '三维视图',
                component: resolve => { require(['@/views/my-components/cesium/cesium-to.vue'], resolve); }
            }

(6) npm run dev 查看效果