项目场景：

vue2.x中集成cesium.js

在Vue项目中集成cesium.js,实现三维地球场景。在vue2.x版本中使用cesium,官网给了可以用npm安装,但是安装后就是不行,根本跑不起来,踩了很多坑才发现,vue2.x使用cesium不能安装最新的,因为版本不兼容,只能安装1.95以及以后的版本,并配置webpack

---

实现步骤

1. 环境：vue/cli 5.0.0 + cesium 1.95.0
2. 安装并配置cesium
   1. 项目初始化

   vue create vue-cesium
   

   2. 安装cesium

   npm install cesium@1.95.0
   

   3. 配置cesium（vue.config.js）

const Path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    configureWebpack: {
        // 解决静态资源引入路径问题
        plugins: [
            new CopyWebpackPlugin({
                patterns: [
                  { from: Path.resolve('./node_modules/cesium/Source/'), to: 'Workers' },
                  { from: Path.resolve('./node_modules/cesium/Source/Workers'), to: 'Workers' },
                  { from: Path.resolve('./node_modules/cesium/Source/Assets'), to: 'Assets' },
                  { from: Path.resolve('./node_modules/cesium/Source/Widgets'), to: 'Widgets' },
                  { from: Path.resolve('./node_modules/cesium/Source/ThirdParty/Workers'), to: 'WoThirdParty/Workersrkers' },
                ]
            }),
            // 解决无法确定base路径问题
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify('./')
            })
        ],
        //解决打包导出文件错误
        module: {
          unknownContextCritical: false  
        }
    }
}

3. 安装插件

   npm install copy-webpack-plugin@6
   

   npm install node-sass
   

   npm install sass-loader
   

4. 示例添加
   新建cesiumBox.js封装初始化地图方法

// 创建 cesiumBox.js 封装公共方法
import * as Cesium from 'cesium';
// import "cesium/Build/Cesium/Widgets/widgets.css";
import "cesium/widgets.css";
Cesium.Ion.defaultAccessToken = ""; // 这里的token是自己申请的token
window.CESIUM_BASE_URL = "/";
let earth = null;
let scene = null;
 
let cesiumBoxService = {
  // 初始化地图
  initMap(container) {
    window.earth = new Cesium.Viewer(container, {
      // terrainProvider: Cesium.createWorldTerrain(),
      animation: true, // 是否显示动画控件
      homeButton: true, // 是否显示home键
      geocoder: true, // 是否显示地名查找控件        如果设置为true，则无法查询
      baseLayerPicker: true, // 是否显示图层选择控件
      timeline: true, // 是否显示时间线控件
      fullscreenButton: true, // 是否全屏显示
      scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      infoBox: false, // 是否显示点击要素之后显示的信息
      sceneModePicker: true, // 是否显示投影方式控件  三维/二维
      navigationInstructionsInitiallyVisible: true,
      navigationHelpButton: false, // 是否显示帮助信息控件
      selectionIndicator: false, // 是否显示指示器组件
    });
    
    // 隐藏版权
    window.earth._cesiumWidget._creditContainer.style.display = "none";
 
    /* 设置经纬度进入为飞入模式 */
    window.earth.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(120.21201, 30.2084, 3000.0),
      duration: 4,
      orientation: {
        heading: Cesium.Math.toRadians(175.0),
        pitch: Cesium.Math.toRadians(-35.0),
        roll: 0.0,
      },
    });
  }
}
export default cesiumBoxService;

修改HelloWorld.vue

// index.vue
<template>
  <div id="mMap" class="cesiumMap">
  </div>
</template>
<script>
// 地图场景初始化
import cesiumBoxService from '@/components/cesiumBox'
 
export default {
  props: [],
  components: {},
  data() {
    return {
    }
  },
  mounted() {
    cesiumBoxService.initMap('mMap');
  },
  computed: {
  },
  methods: {
  },
}
</script>
<style lang='scss' scoped>
.cesiumMap {
  width: 100%;
  height: 100vh;
}
</style>

启动项目：npm run serve发现报错，找不到widgets.css路径，提示信息：see exports field in vuecesium\node_modules\cesium\package.json

根据提示信息我们去查看该路径下的package.json，修改内容如下所示：

"exports": {
    "./package.json": "./package.json",
    "./widgets.css": "./Source/Widgets/widgets.css",
    ".": {
      "require": "./index.cjs",
      "import": "./Source/Cesium.js"
    }
  },

保存重启项目，发现启动成功，查看效果