vue2（vue-cli3x[vue.config.js]）使用cesium新版（1.117.0）配置过程

看来很多解决方法都没有办法，最后终于。呜呜呜呜

这里我用的是vue-cli去搭建的项目的vue2 项目，其实不建议用vue2搭配cesium。因为目前cesium停止了对vue2的版本更新，现在默认安装都是vue3版本，因此需要控制版本，否则就会报错。只有cesiun为npm install cesium@1.95.0的时候搭配vue2使用不会用报错问题，而搭配使用新版本的cesium会报错。真的头疼，但是最后还是解决出来了。

有2个方法。先说最好用的吧

当然这个配置不仅适用于117版本高版本我感觉都是可以的。

解决步骤：

1. 确认 CesiumJS 安装

首先，确保你已经通过 npm 或 yarn 安装了 CesiumJS：

javascript 复制代码

npm install cesium
# 或者
yarn add cesium

2. 配置 webpack

CesiumJS 是一个复杂的库，包含许多静态资源（如图片、shader等）。正确配置 webpack 是整合 CesiumJS 到 Vue.js 项目的关键。

在你的 webpack 配置中，需要使用 copy-webpack-plugin 插件将 CesiumJS 的静态资源复制到你的构建目录，并且配置 webpack 让它能够识别 CesiumJS 作为一个外部依赖。

示例 webpack 配置（可以在 vue.config.js 或者直接在 webpack 配置中设置）：

javascript 复制代码

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

module.exports = {
  // 其他配置...
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([{ from: 'node_modules/cesium/Build/Cesium', to: 'Cesium' }]),
    ],
    externals: {
      cesium: 'Cesium',
    },
  },
  // 其他配置...
};

CopyWebpackPlugin: 这是一个 webpack 插件，用于复制文件或整个目录到构建目录。在这里，我们配置它来复制 CesiumJS 的 Build/Cesium 目录下的文件到一个名为 cesium 的目录中。

externals: 这个配置告诉 webpack 在打包过程中遇到 Cesium 这个模块时不去打包它，而是使用全局变量 Cesium，这要求在运行时，通过外部引入 CesiumJS 库（通常是在 HTML 中通过 <script> 标签引入）。

3. 修改 Vue 组件中的引入方式

在 Vue.js 组件中，根据你的需求选择全局引入或者按需引入 CesiumJS。

全局引入示例：

在 main.js 中全局引入 CesiumJS：

javascript 复制代码

import Vue from 'vue';
import Cesium from 'cesium';

Vue.prototype.Cesium = Cesium;

引入示例：

接下来的使用都跟平时是一样的

在需要使用 CesiumJS 的组件中引入：

javascript 复制代码

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

<script>
import * as Cesium from 'cesium';


export default {
  mounted() {
    const viewer = new Cesium. Viewer('cesiumContainer');
    // 在这里使用 Cesium 的其他功能...
  },
};
</script>

按需引入示例：

在需要使用 CesiumJS 的组件中按需引入：

javascript 复制代码

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

<script>
import 'cesium/Build/Cesium/Widgets/widgets.css';
import { Viewer } from 'cesium';

export default {
  mounted() {
    const viewer = new Viewer('cesiumContainer');
    // 在这里使用 Cesium 的其他功能...
  },
};
</script>

ok。。。接下来是第二种方法

因为以上的配置可能跟某种语法冲突，so备用方案我们才有html的静态引入。

在外面的node_modules/cesium/Build/Cesium。拷贝到在项目的 public 文件夹下根目录中。

第二步，在项目 index.html 文件中，head 标签里面，引入 cesium 的全局样式。

还是在这个文件中，在 body 最后，引入 cesium 源码。。。注意路径。

使用时无需在映入import之类的，检查时候映入成功就是f12输入检查一下

使用实例

javascript 复制代码

<script>
methods: { 
 init() {
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: true, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: true, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false // 是否显示帮助信息控件
      });
    }
}

  mounted() {
    // this.init();
}
</script>