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/