vue2.x+cesium初始化

1.安装依赖

npm i cesium -s

2.引入插件，初始化项目

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

<script>
import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";

export default {
  name: "CesiumMap",
  components: {
  },
  data() {
    return {
      viewer: null
    };
  },
  methods: {
    initMap() {
      // token是要自己去官网注册获取
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0NTQ3YWY0MS1jOWJlLTRmNTctYjMzNC02MWMzNTg2NjU4OGEiLCJpZCI6OTc2ODYsImlhdCI6MTY1NTI4NDg3Mn0.Ykrdu4JQiFyAcmJafyZtBqAbtaVenGSlMOVFh8IklsM';
      this.viewer = new Cesium.Viewer("cesiumContainer");
    }
  },
  created() {},
  mounted() {
    this.initMap();
  },
};
</script>

<style scoped>
.cesium_map{
    font-size: 20px;
    width: 100vw;
    height: 100vh;
}
</style>

3.解决报错，安装依赖

copy-webpack-plugin@6 --save-dev //这里用的是6版本，会跟webpack有兼容问题，注意版本选择

4.配置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/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  
        }
    }
}