vue3中使用cesium

1.安装cesium

npm install cesium@1.95.0 -s

2.安装loader

npm install @open-wc/webpack-import-meta-loader

3.vue.config.js 配置

const {defineConfig} = require('@vue/cli-service')//require 是 node 用来加载并执行其它文件导出的模块的方法。
const CopyWebpackPlugin = require("copy-webpack-plugin");

const webpack = require("webpack");
const path = require("path");

let cesiumSource = "node_modules/cesium/Source";//定义 Cesium 源码路径
let cesiumWorkers = "Workers";
module.exports = defineConfig({
  //默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。
  transpileDependencies: true,
  //是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。
  //设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。
  lintOnSave: false,
  //如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
  // 如果这个值是一个函数，则会接收被解析的配置作为参数。
  configureWebpack: {
    //externals防止将某些 import 的包(package)打包到 bundle 中，
    // 而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)
    externals: {
      'cesium': 'Cesium',
    },
    //output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset
    // 和其他你所打包或使用 webpack 载入的任何内容」
    output: {
      sourcePrefix: " ", //修改输出 bundle 中每行的前缀。让webpack 正确处理多行字符串配置 amd参数
    },
    //设置 require.amd 或 define.amd 的值。
    amd: {
      toUrlUndefined: true, // webpack在cesium中能友好的使用require //允许Cesium兼容 webpack的require方式
    },
    //配置模块如何解析。
    resolve: {
      //尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
      extensions: ['.js', '.vue', '.json'],
      //创建 import 或 require 的别名，来确保模块引入变得更简单。
      alias: {
        "@": path.resolve("src"),
        cesium: path.resolve(__dirname, cesiumSource),//设置cesium别名
      }
    },
    //plugins 选项用于以各种方式自定义 webpack 构建过程。
    plugins: [
        //一种webpack拷贝文件的插件CopyWebpackPlugin
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(cesiumSource, cesiumWorkers), // 拷贝来源
            to: "Workers"//拷贝到的位置
          },
          {from: path.join(cesiumSource, "Assets"), to: "Assets"},
          {from: path.join(cesiumSource, "Widgets"), to: "Widgets"},
          {from: path.join(cesiumSource, "ThirdParty/Workers"), to: "ThirdParty/Workers"}
        ]
      }),
        //DefinePlugin 允许你创建可在编译时配置的全局常量
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./"),
      }),
    ],
    //这些选项决定了如何处理项目中的不同类型的模块。
    module: {
      //让webpack打印载入特定库时候告警
      unknownContextCritical: false,
      //regExp: 正则表达式.
      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
      //创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。 这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: '@open-wc/webpack-import-meta-loader',
          },
        },
      ]
    },
  },
  //通过 webpack-dev-server 的这些配置，能够以多种方式改变其行为
  devServer: {
    //启用 webpack 的 热模块替换 特性
    // 模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面。
    hot: true,
    // 是否自动启动浏览器
    //open: true,
    // 当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时，代理某些 URL 可能会很有用。
    proxy: {
      //'/api': 'http://localhost:3000',对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users
      '/api': {
         后台接口域名
        target: 'http://localhost:8888/',
        //默认情况下，代理时会保留主机头的来源，可以将 changeOrigin 设置为 true 以覆盖此行为
        是否跨域
        changeOrigin: true,
        //如果要代理 websockets，配置这个参数
        ws: true,
        //如果不希望传递/api，则需要重写路径
        pathRewrite: {'^/api': ''}
      }
    },
    //指定监听请求的端口号：
    port: 7000,
  }
})

4.main.js

import 'cesium/Widgets/widgets.css';

5.index.html

  html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

 6.自己新建组件

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

<script>
    import * as Cesium from 'cesium/Cesium'
    export default {

        mounted(){
            this.initCesium()
        },
        methods:{
            initCesium(){
                Cesium.Ion.defaultAccessToken='命令牌';//cesiu官网注册，然后自己新建一个或者用默认；
                let viewer = new Cesium.Viewer('cesiumContainer');
                // 去除logo
                logoviewer.cesiumWidget.creditContainer.style.display = "none";
            }
        }


    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #cesiumContainer{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

7.引用组件