vue-cli创建webpack vue项目 集成cesium

1、创建vue-cli3以上版本vue工程

vue create vue-cesium   可以先不配置eslint

2、安装cesium模块

cd  ./vue-cesium目录下，执行： npm i copy-webpack-plugin@5.0.1 --save-dev

3、创建vue.config.js文件，粘贴一下内容：

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

const cesiumSource = "./node_modules/cesium/Source";
const cesiumWorkers = '../Build/Cesium/Workers';
module.exports = {
  configureWebpack: {
    resolve: {
       // 注意：用于解决cesium core内部 import('url') 、 import('url') 报错问题
      fallback: { "https": false, "zlib": false, "http": false, "url": false },
      alias: {
        "@": path.resolve("src"),
      },
    },
    amd: {
      // Cesium源码模块化使用的requireJs
      // 此配置允许webpack友好地在铯中使用require，使webpack打包cesium
      // 告诉Cesium, AMD的webpack版本用来评估要求的声明是不符合标准的toUrl功能
      toUrlUndefined: true
    },
    module: {
      // 解决require引入警告
      unknownContextCritical: false
    },
    plugins: [
      // 将node-module里面的 workers（对应build目录下）、 assets、 widget拷贝到工程部署文件夹中
      new CopyWebpackPlugin([{
        from: path.join(cesiumSource, cesiumWorkers),
        to: "Workers"
      },]),
      new CopyWebpackPlugin([{
        from: path.join(cesiumSource, "Assets"),
        to: "Assets"
      },]),
      new CopyWebpackPlugin([{
        from: path.join(cesiumSource, "Widgets"),
        to: "Widgets"
      },]),
      new CopyWebpackPlugin([{
        from: path.join(cesiumSource, cesiumWorkers),
        to: "Workers",
      },]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./"),
      }),
      // 使Cesium对象实例可在每个js中使用而无须import
      new webpack.ProvidePlugin({
        Cesium: ["cesium/Source/Cesium"]
      })
    ],
    module: {
      unknownContextCritical: false,
      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
    },
  },
};

 4、修改HomeView.vue文件

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

<script>
import { onMounted } from "vue";
export default{
  setup() {
    onMounted(() => {
      let viewer = new Cesium.Viewer("cesiumContainer");
    });
    return {};
  },
};
</script>
<style scoped>
  .home{
    width: 100%;
    height: 100%;
  }
</style>

 5、最终效果