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/Cesium'
//或者：
import {Viewer} from 'cesium/Cesium'

這樣就不會報錯了。如果你遇到了同樣的問題，恭喜你接下來的配置步驟不需要看了。

步驟

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

1. 定義 Cesium 源碼路徑：

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

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

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

3. 設置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)
    }
  },

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

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

2.2 配置 webpack.dev.conf.js

1. 定義路徑：

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

2. 在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文件

1. 定義路徑：

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

2. 在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/