适用于ruoyi vue2的cesium配置

前言

本人ruoyi vue2模板搭建的管理项目中集成Cesium，踩了诸多坑。

各种查阅和看Demo，测试出来了可行的配置。特来分享，或许可以减少各位同伴踩到的坑（如果可以，麻烦在文章底部留个言，我想知道有多少朋友也在做这个工作）。

配置步骤

版本道传版本要≤1.95.0，这里参考https://github.com/syzdev/vue-cesium-start使用了1.80.0版本
添加一个loader: @open-wc/webpack-import-meta-loader

vue.config.js配置

'use strict'
const path = require('path')
const webpack = require("webpack")
// ....省略，不知道你能否理解俺下面写的注释，有问题可以留言问，俺看到会回复的
const CopyPlugin = require('copy-webpack-plugin');
// ....
module.exports = {
  // ....
    plugins: [
      // ....
      // cesium-copy-plugin[copyplugin prop type is array]
      new CopyPlugin([{
        from: 'node_modules/cesium/Build/Cesium/Workers',
        to: 'cesium/Workers'
      }]), new CopyPlugin([{
        from: 'node_modules/cesium/Build/Cesium/ThirdParty',
        to: 'cesium/ThirdParty'
      }]), new CopyPlugin([{
        from: 'node_modules/cesium/Build/Cesium/Assets',
        to: 'cesium/Assets'
      }]), new CopyPlugin([{
        from: 'node_modules/cesium/Build/Cesium/Widgets',
        to: 'cesium/Widgets'
      }]), 
      // cesium-resource-path
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./cesium'), 
      }),
    ],
    // cesium-meta-loader
    module: {
      unknownContextCritical: false,
      rules: [
        {
          test: /.js$/,
          use: {
            loader: "@open-wc/webpack-import-meta-loader",
          },
        },
        {
          exclude: /node_modules/,
          include: /src/,
          test: /.js$/,
          use: "babel-loader",
        },
      ],
    },
    // ceisum-multi-line
    output: {
      sourcePrefix: " ", 
    },
    // cesium-better-require
    amd: {
      toUrlUndefined: true,
    },
  },
  chainWebpack(config) {
    // ....
    // cesium-babel-loader
    config.module
      .rule('babel')
      .test(/\\.js$/)
      .include
      .add(/node_modules\\/@cesium/)
      .end()
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        presets: ['@babel/preset-env'],
        plugins: [
          '@babel/plugin-proposal-optional-chaining',
          '@babel/plugin-proposal-nullish-coalescing-operator',
        ]
      });
  },

  // cesium-pile-deps
  transpileDependencies: [
    '@cesium'
  ],
}