Cesium筆記 — Vue+Cesium開發環境搭建（基於Cesium1.69）

前言

今天研究了下 Vue + Cesium 的相關配置，用的是 Cesium 1.69。 網上找到了很多參考文章，如：https://www.jianshu.com/p/ff26886f7255，
但配置完後使用 import Cesium from 'cesium/Cesium' 導入模塊時總會報錯：

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

查找緣由，發現 Cesium 1.63 版本以前是用的AMD的方式進行編譯的，

而在1.63版時使用ES6進行了重構:

因此1.63以後的版本，導入模塊時應該使用以下方式：

import * as Cesium from 'cesium/Source/Cesium.js'
//或者：
import {Viewer} from 'cesium/Source/Cesium.js'

這樣就不會報錯了。若是你遇到了一樣的問題，恭喜你接下來的配置步驟能夠略過了。

步驟

1. 建立vue項目

使用vue-cli工具建立一個vue項目：

vue init webpack cesium_demo

安裝cesium：

cd cesium_demo
npm install cesium --save

2. Cesium環境配置

這裏須要修改webpack.base.conf.js, webpack.dev.conf.js, webpack.prod.conf.js 三個文件

2.1 配置 webpack.base.conf.js

• 定義 Cesium 源碼路徑：

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

• 讓webpack正確處理多行字符串

在output中添加sourcePrefix:' '

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

• 設置cesium別名，

須要在resolve中設置cesium別名，這樣在引入的時候就能夠根據別名找到Cesium的包。
（注：也能夠不設置別名，導包是直接導入'cesium/Source/Cesium.js'就行。其實設置別名的目的就是讓「別名」指向/node_modules/cesium/Source目錄）

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

• 阻止依賴警告
  module裏添加unknownContextCritical:false

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

2.2 配置 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('')
})

2.3 配置webpack.prod.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({
   // 注意這裏和dev的配置不一樣
   // 定義Cesium從哪裏加載資源，若是使用默認的''，卻變成了絕對路徑了，因此這裏使用'./'，使用相對路徑
   CESIUM_BASE_URL: JSON.stringify('./')
})

3. 開始使用

再次強調這裏不能使用 import Cesium from 'cesium/Cesium' 導入模塊，由於Cesium 1.63 版本之後使用的是ES6。應該使用以下方式：

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

<script>
    import { Viewer } from 'cesium/Cesium'
    import  'cesium/Source/Widgets/widgets.css'
    export default {
        name: "cesiumPage",
        data() {
            return {};
        },
        mounted() {
            let viewer = new Viewer("cesiumContainer");
        }
    };
</script>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
}
#cesiumContainer {
    width: 100%;
    height: 100vh;
}
</style>

成功！

4. 參考文章：

https://www.jianshu.com/p/ff26886f7255
https://github.com/CesiumGS/cesium/issues/8471
https://cesium.com/docs/tutorials/cesium-and-webpack/