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>
相关推荐
CodeSheep9 分钟前
大家有没有发现一个奇特现象:你能在一个公司工作 12 年以上,无论你多忠诚多卖力,一旦公司赚的少了,那你就成了“眼中钉肉中刺”
前端·后端·程序员
亿元程序员14 分钟前
你知道三国志战略版的地图是怎么实现的吗?
前端
Rewloc22 分钟前
IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署+常见问题解决)
前端·tomcat·intellij-idea
devii6624 分钟前
120html
前端
.生产的驴24 分钟前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
峥无31 分钟前
HTML 零基础入门到实战:从骨架到页面的完整指南
前端·html
南囝coding38 分钟前
《独立开发者精选工具》
前端·后端·开源
IT_陈寒42 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
艾小码1 小时前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..2 小时前
ES6是什么
前端·javascript·es6