Vue+Cesium環境搭建

基礎環境安裝

node.js(檢測npm包管理工具  npm -v)
Webpack安裝(全局安裝  npm install webpack -g)(檢測安裝成功: webpack -v)
vue-cli腳手架構建工具（npm install vue-cli -g）（檢測：vue -V）

vue項目搭建

命令行cd進入項目構建文件目錄級，執行vue init webpack project_name(項目名不可用中文)，按提示輸入相應內容，項目文件構建完成。
cd到項目目錄內，安裝項目依賴npm install，項目啓動npm run dev
瀏覽器進入地址http://localhost:8080，打開項目頁面，搭建完成

Cesium環境搭建
命令行在項目目錄下，安裝cesium組件庫 npm install cesium --save

修改 在build/webpack.base.conf.js，

定義cesium源碼路徑
const cesiumSource = '../node_modules/cesium/Source'
var webpack = require('webpack')

在module.exports中output添加sourcePrefix: ’ '，讓webpack正確處理多行字符串

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

在resolve中設置cesium別名

resolve: {
   extensions: ['.js', '.vue', '.json'],
   alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'cesium': path.resolve(__dirname, cesiumSource)
   }
},

module裏添加

module: {
   rules: [...],
   unknownContextCritical: false,
},

修改 webpack.dev.conf.js 文件
配置路徑

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

在plugins下面添加如下插件

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' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
new webpack.DefinePlugin({
   // Define relative base path in cesium for loading assets
   CESIUM_BASE_URL: JSON.stringify('')
})

修改 webpack.prod.conf.js文件
配置路徑

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

在plugins添加如下插件，與dev配置略有不同

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' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' } ]),
new webpack.DefinePlugin({
    // Define relative base path in cesium for loading assets
    //定義 Cesium 從哪裏加載資源，如果使用默認的''，卻變成了絕對路徑了，所以這裏使用'./',使用相對路徑
     CESIUM_BASE_URL: JSON.stringify('./')
})

修改config裏index.js中build中的assetsPublicPath爲"./"

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: "./",

配置main.js

import Cesium from 'cesium/Cesium'
import widgets from 'cesium/Widgets/widgets.css'
 
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

div引入，使用cesium。修改components下的HelloWorld.vue組件

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>

import Cesium from 'cesium/Cesium'

export default {
  name: 'cesiumPage',
  data () {
    return {
    }
  },
  mounted(){
    //var Cesium = this.Cesium;
    var cesiumContainer = document.getElementById("cesiumContainer");
    var viewer = new Cesium.Viewer("cesiumContainer",{
      //加載在線谷歌地圖
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
         url:"http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}"
      })
    })
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
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%;
}
.box {
  height: 100%;
} 
</style>

執行npm run dev , 打開瀏覽器運行項目（localhost:8081）（默認端口號爲8080，到config/index.js裏可修改）

這裏提示構造CesiumWidget時出錯
在這裏有兩種解決辦法
第一種是修改 build/webpack.base.conf.js，
module裏添加

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

第二種還是修改build/webpack.base.conf.js，

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
      sourcePrefix: ' '
  },
  //在Cesium中啓用Webpack時使用Require
   amd: {                                    
     toUrlUndefined: true
   },

我個人傾向於第二種0.0；
修改完之後運行 如下