最新基于Webpack的Cesium+Vue整合

1. 安装环境
在学习过程中，参考以下学习博客
基于webpack 构建Cesium + Vue 的应用
主要使用了node npm vue vue-cli webpack cesium等工具和环境。

2. 使用node安装vue-cli
cmd跳转到你想要放置开发项目的文件路径下，在该路径下运行cmd命令：
~$ npm install -g vue-cli
~$ vue -V //查看vue-cli的版本

3. 使用vue-cli脚手架创建Webpack 模板项目
~$ vue init webpack vue-cesium
其中vue-cesium 是项目名称，自己可以随意命名；
之后是一系列项目的配置，按个人需要选择就好（一般配置为no，除vue-router可根据需要配置为yes）
接着npm将会自动安装下载模板和许多依赖项，等到下载完毕后， cd到你创建的项目文件中，本文是vue-cesium，命令如下所示：
~$ cd vue-cesium
~$ npm run dev
正常情况下在浏览器输入http://localhost:8080 就可以看到vue的界面了

4. npm安装Cesium 环境（cesium的配置步骤）
在vue-cesium文件路径中运行cmd命令，输入以下命令将cesium作为项目依赖项
npm install cesium --save
当cesium下载完毕后，再进行下面的文件配置工作
（1）配置webpack.base.conf.js文件
进入build 文件夹，编辑webpack.base.conf.js
定义 Cesium 源码路径const cesiumSource = '../node_modules/cesium/Source'
在output 里加入sourcePrefix: ’ ’ 让webpack 正确处理多行字符串配置 amd参数,
如下图所示：

å¨è¿éæå¥å¾çæè¿°
在resolve 中设置别名 ‘cesium’: path.resolve(__dirname, cesiumSource)
定义别名cesium后，cesium代表了cesiumSource的文件路径。

在module 中加入 unknownContextCritical: false, 让webpack 打印载入特定库时候警告：

（2）配置 webpack.dev.conf.js 文件
进入build文件夹，编辑 webpack.dev.conf.js文件
定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有 ../ ），
const cesiumSource = 'node_modules/cesium/Source'
定义 Cesium Workers 路径：
const cesiumWorkers = '../Build/Cesium/Workers'，

plugins

在plugin中加入下面插件,拷贝静态资源

å¨è¿éæå¥å¾çæè¿°
（3）配置 webpack.prod.conf.js 文件
进入 build 文件夹，编辑webpack.prod.conf.js文件
定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有…/）
const cesiumSource = 'node_modules/cesium/Source'
定义 Cesium Workers 路径
const cesiumWorkers = '../Build/Cesium/Workers'