掘金+CSDN上主流vue（vuecli）引入cesium方式的总结和梳理

在vue项目中引入Cesium可以通过多种方式，以下是一些常见的方法：

1. 使用官方提供的Vue插件：

   • 优点：官方支持，安装简单。
   • 缺点：可能不包含最新版本的Cesium。
   • 安装命令：vue add cesium

2. 手动安装Cesium并配置：

   • 优点：可以手动选择Cesium版本。
   • 安装命令：npm install cesium

   • 配置步骤：

     • 在vue.config.js中添加别名配置。
     • 在组件中导入Cesium并使用。

3. 使用CDN直接在HTML中引入Cesium：

   • 优点：不需要安装，简单快速。
   • 缺点：不利于管理和维护。
   • 在public/index.html中添加Cesium CDN链接。

4. 使用Vue CLI的静态文件夹：

   • 优点：可以放在任何位置，方便管理。
   • 步骤：将Cesium文件夹复制到项目的public文件夹中，并在index.html中引入。

以下是一个简单的示例代码，展示如何在Vue组件中使用Cesium：

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        cesium: path.resolve(__dirname, 'path/to/node_modules/cesium/Source')
      }
    }
  }
};
 
// YourComponent.vue
<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>
 
<script>
import Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';
 
export default {
  name: 'YourComponent',
  mounted() {
    const viewer = new Cesium.Viewer('cesiumContainer');
  }
};
</script>

在实际应用中，选择合适的方法，并根据项目需求进行配置。如果需要使用最新版本的Cesium，推荐通过手动安装的方式，并确保正确配置了别名。