介紹

這是一篇關於如何通過Webpack的配置快速將Vue-cli腳手架與Cesium庫整合，最終目的是可以使用Vue+Cesium進行組合編寫程式碼，並可以正確打包Cesium的程式碼。

Cesium.js是一個渲染三維地球的JavaScript庫。它可以實現非常豐富的地理空間視覺化，比如向量幾何、三維模型、傾斜攝影、粒子效果和模型動畫等等。這些物件都視覺化在一個帶有地形和影像的三維地球上。並且Cesium也是完全開源免費的，他強大的功能只需要一個支援WebGL的瀏覽器而不需要任何外掛就可以執行。

關於Cesium的功能在之前的工作中也是比較熟悉了，但是關於Node方面的知識還是自己從頭一點點開始學習整理的，本文主要針對的是對於如何整合Vue+Cesium摸不著頭腦的同學們，如果您本身對Node已經非常瞭解得話可以直接跳過下面教程，直接克隆GitHub上的Demo，附上

目錄

環境介紹

安裝環境

• 1.安裝Node.Js
  關於Node的安裝這裡就不詳細去說了，比較容易。如果是之前沒有接觸過Node的同學，可以參照下面這篇文章:
  Node.js安裝及環境配置之Windows篇

  關於Win10或者Win8安裝Node.Js的msi包因為許可權問題報錯2503的同學可以直接開啟終端使用如下命令安裝檔案:
  msiexec /package "E:\softwareunion\node-v8.10.0-x64.msi"

• 2.安裝Vue-cli腳手架
  首先我們需要全域性安裝vue-cli

npm install -g vue-cli
vue -V   //安裝成功後可以檢視當前vue的版本，注意V是大寫的
vue list //通過list命令我們可以看到vue有六種模板，我們使用webpack模板構建

因為Npm如同Maven一樣，它們預設訪問的是國外資源，所以安裝速度過慢的話，可以通過配置阿里的映象來提升安裝速度，命令如下:
npm config set registry https://registry.npm.taobao.org

• 3.建立Webpack模板的專案
  我們選用webpack模組進行建立，命令很簡單，如下:

vue init <template-name> <project-name> 

這裡的<template-name>我們改成webpack，而<project-name>就是各位的專案名稱了，輸入以後會進行下載模板，在建立過程中依次填寫一些配置資訊

在安裝成功後cd <project-name>進入當前資料夾後，使用

npm run dev

如果安裝不出意外的話，並且8080埠沒有被佔用，那麼瀏覽器輸入http://localhost:8080就可以看見已經安裝成功了

雖然我們使用了一個很簡單的命令去安裝專案架構，但是他的專案目錄結構卻不簡單，使用構建工具建立專案對於初學Node的同學，這是非常不推薦的!
如果你跟我一樣是個Node和Vue初學者，那麼我推薦各位閱讀並學習完尤大的Vue 2.0學習路線後再次去使用構建工具是非常有必要的.

• 4.安裝Cesium環境
  還是在當前資料夾根目錄，使用如下命令就可以安裝cesium了，在安裝完後可以進入node_modules看到cesium的目錄結構.

npm install cesium

到此為止，環境搭建方面就就結束了。下面讓我們開始進行配置Webpack來使用Cesium吧!

Webpack配置

在配置之前，使用過Cesium的同學都知道它是一個非常複雜的庫，很難去直接打包
我們無法通過在main.js中像引入Vue那樣直接進行引入Cesium，因為:

• Cesium是用非同步模組定義（AMD）的格式編寫原始碼的
• 它包括一些事先編譯好的基於AMD的第三方庫
• Cesium中web worker的使用率很高

• 一些程式碼使用了多行字串

  關於Webpack與Cesium的整合在Cesium官網中有一篇教程，教程指出了兩種使用Cesium的方式，我們是基於原始碼的基礎上來配置的

• 手動複製Cesium編譯好的靜態檔案到static資料夾中
  進入node_modules\cesium\Build資料夾中，將編譯好的Cesium檔案複製到根目錄下的static中，並把其中Cesium.js刪除
  完成後效果如下:
  
  這裡涉及到幾個知識點:
  1.static資料夾的作用是存放靜態檔案的，Webpack在打包時會將其打包到生成dist資料夾中
2.CopyWebpackPlugin是Webpack的外掛，他的作用就像咱們剛才手動複製檔案到另一個資料夾的過程

//在webpack.dev.conf和webpack.prod.conf有如下配置
 new CopyWebpackPlugin([
     {
       from: path.resolve(__dirname， '../static')，
       to: config.dev.assetsSubDirectory，
       ignore: ['.*']
     }
 ])

• 設定Webpack的配置項，使其支援Cesium
  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: ' '
 }

2.在build/webpack.base.conf.js下的module中加入unknownContextCritical: false，讓Webpack列印載入特定庫時候的警告。
3.在build/webpack.base.conf.js下的module中加入unknownContextRegExp: /^.\/.*$/，為了解決Error: Cannot find module "."該錯誤

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

配置到目前這種程度的話，已經可以解決很多Cesium的quirks了，剩下就讓我們編寫Vue元件來實驗自己配置的到底是否成功

Webpack的配置不是一時半會能掌握的，我們不能因為Webpack的複雜而放棄或者是Vue-cli腳手架已經幫我們配置好一套方案而不去學習和修改，下面是我這段時間學習過程中，個人覺得還不錯的文章，推薦給大家:
Webpack入門
Vue-cli中的Webpack配置

編寫Vue元件

到這裡的話，只剩最後一步了，那麼讓我們首先來整理下思路。

我們已經將Cesium所需要的靜態資源打包並放到正確的位置了，但是Cesium並不知道如何找到他們，我們需要讓Cesium知道它的靜態資源存放在哪裡。那麼這裡Cesium已經提供了一個API，就是buildModuleUrl函式。當完成這一步完成後我們就可以進行Vue+Cesium的正常開發了

那麼讓我們看下程式碼是如何編寫的:

• 新建一個cesiumViewer的元件
  在src下新建一個名為cesiumViewer.vue的元件，程式碼如下:

<template>
    //放置Cesium的容器
    <div id="cesiumContainer"></div>
</template>

<script>
//匯入Cesium原始碼中的Viewer元件，注意這裡是用的Viewer元件的方式載入，而不是載入整個Cesium
import Viewer from "cesium/Source/Widgets/Viewer/Viewer";
//我們剛才所說的如何讓Cesium知道靜態資源在哪裡的API
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
//匯入必須的樣式表
import "cesium/Source/Widgets/widgets.css";

export default{
    name:"cesiumContainer"，
    mounted:function () {
        //設定靜態資源目錄
        buildModuleUrl.setBaseUrl('../static/Cesium/')
        //建立viewer例項
        this.viewer = new Viewer('cesiumContainer');
    }，
    data () {
        return {
            'viewer' : {}
        }
    }
}
</script>

<style scoped></style>

• 在App.vue中註冊元件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import cesiumViewer from "./components/cesiumViewer.vue"
export default {
  name: 'App'，
  components : {
    'cesiumViewer' : cesiumViewer
  }
}
</script>

<style>
//保證瀏覽器全螢幕顯示，沒有多餘的白邊
html， body， #cesiumContainer {
 width: 100%; 
 height: 100%; 
 margin: 0; 
 padding: 0; 
 overflow: hidden;
}
#app {
  font-family: 'Avenir'， Helvetica， Arial， sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
</style>

• 修改router/index.js檔案

import Vue from 'vue'
import Router from 'vue-router'
import cesiumViewer from '@/components/cesiumViewer'

Vue.use(Router)

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

執行專案以及打包專案

如果之前的工作都完成的話，我們退回到專案的根目錄下執行npm run dev，整個專案就會正常啟動了

而專案打包只需要執行npm run build就可以發現您的專案中多了個dist資料夾，關於dist資料夾生成的策略以及具體優化這裡就不多做介紹了

後續改進Webpack配置

到目前為止，雖然最基本的配置已經完成，但是上述配置有些不妥的地方，並且有些同學可能不需要引入分割Cesium的模組進行開發,那麼我們稍微進行一些改進

• 使用CopyWebpackPlugin對靜態檔案直接打包,而不是手動複製檔案

1.首先將static資料夾中之前手動複製的檔案刪除
2.在webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js配置檔案中定義Cesium的原始碼路徑和web Workers路徑

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

3.在webpack.base.conf.js配置檔案中設定別名
4.在webpack.base.conf.js配置檔案中配置amd引數

5.在webpack.dev.conf.js、webpack.prod.conf.js配置檔案中引入CopyWebpackPlugin並配置外掛功能

const CopyWebpackPlugin = require('copy-webpack-plugin')

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

• Vue元件應該只幹一件事情
  1.修改main.js的程式碼,使其從入口處引入整個Cesium

2.修改App.vue元件

3.修改cesiumViewer元件

4.在webpack.dev.conf.js、webpack.prod.conf.js配置檔案增加Cesium的靜態路徑配置
  

到這裡的話二次修改的配置已經完成,如果配置沒有錯誤的也可以看見頁面正確渲染出來,那麼本次教程也就到這裡了,非常謝謝大家的閱讀!