一、基本環(huán)境安裝

1. node.js
2. webpack安裝
3. vue -cli 安裝

二、vue項(xiàng)目搭建

1.初始化項(xiàng)目

vue init webpack project_name

2.安裝相關(guān)的工具

cd project_name
npm install

3.啟動(dòng)

npm run dev

三、Cesium環(huán)境配置

1.安裝Cesium

npm install cesium --save

2.在build/webpack.base.conf.js下

①定義cesium源碼路徑

const cesiumSource = '../node_modules/cesium/Source'

②在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: ' '
  },

③在output后面，添加amd模式支持

output: {...}，
amd: {
  toUrlUndefined: true
},

④在resolve中設(shè)置cesium別名，引入的時(shí)候直接根據(jù)別名就可以找到cesium包了

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

⑤module里添加unknownContextCritical:false，讓webpack打印載入特定庫(kù)時(shí)候告警

module: {
   rules: [...],
   unknownContextCritical: false,
   // unknownContextRegExp: /^.\/.*$/,   //這個(gè)很多都推薦了，但是實(shí)測(cè)的時(shí)候發(fā)現(xiàn)會(huì)報(bào)錯(cuò)，先不用
},

3.配置webpack.dev.conf.js

①配置路徑

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

②在plugins下面添加如下插件

plugins: [
   ...,
    // Copy Cesium Assets, Widgets, and Workers to a static directory
    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('')
    })
  ]

4.配置webpack.prod.conf.js文件

①配置路徑

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

②在plugins下面添加如下插件，拷貝靜態(tài)資源。與dev配置略有不同

plugins: [
   ...,
    // Copy Cesium Assets, Widgets, and Workers to a static directory
    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({
       // 定義Cesium從哪里加載資源，如果使用默認(rèn)的''，卻變成了絕對(duì)路徑了，所以這里使用'./'，使用相對(duì)路徑
       CESIUM_BASE_URL: JSON.stringify('./')
    })
  ]

5.修改config里index.js文件，build中的assetsPublicPath:"./"

assetsSubDirectory: 'static',
assetsPublicPath: '',

四、調(diào)用Cesium

有以下兩種方式

1.全局配置

①配置main.js

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

②直接在組件中調(diào)用

var Cesium = this.Cesium
Cesium...

2.組件中配置

import Cesium from 'cesium/Cesium'
import widgets from 'cesium/Widgets/widgets.css'
<script>
export default {
  data () {...},
  mounted(){
    Cesium...
  }
}
</script>

3.在1.60版本以上的Ceisum配置

const Cesium = require('cesium/Cesium')
import widgets from 'cesium/Widgets/widgets.css';
<script>
export default {
  data () {...},
  mounted(){
    Cesium...
  }
}
</script>

五、可能遇到的問(wèn)題

1.運(yùn)行時(shí)報(bào)如下錯(cuò)誤

"export 'default' (imported as 'Cesium') was not found in 'cesium/Cesium'

Cesium在1.6版本以后只能通過(guò)require導(dǎo)入了，用import就會(huì)報(bào)如上錯(cuò)誤，具體導(dǎo)入代碼，請(qǐng)參考四-3

參考文檔

1.vue 2.x+webpack+cesium1.64（1）詳解：環(huán)境部署、項(xiàng)目搭建與配置
2.Vue+Cesium項(xiàng)目環(huán)境搭建