vue3 ts环境cesium配置

安装cesium

npm install cesium -s

vue.config.js 配置

const path = require('path')
const CopyWebpackPlugin = require("copy-webpack-plugin");
const cesiumBuild = './node_modules/cesium/Build/Cesium'

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: '/',
  productionSourceMap: false,
  configureWebpack: config => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
    config.plugins = [
      new CopyWebpackPlugin([
        {
          from: cesiumBuild,
          to: './Cesium',
          toType: 'dir'
        },
      ]),
      ...config.plugins
    ];

    config.externals = config.externals || {};
    config.externals.cesium = 'Cesium';
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
  },
  css: {
    sourceMap: true,
    extract: false,
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }

      }
    }
  },
  devServer: {
    port: 8082,
    proxy: {
      '/api': {
        target: 'http://localhost:9001/',
      },
      '/geoserver': {
        target: 'http://localhost:8080/',
      }
    }
  }
}

public中index.html增加链接

<script src="<%= BASE_URL %>Cesium/Cesium.js"></script>
<link rel="stylesheet" href="<%= BASE_URL %>Cesium/Widgets/widgets.css" />

组件

<template>
  <div id="container"></div>
</template>
<script lang="ts">
import * as Cesium from "cesium";
import { defineComponent, onMounted } from "vue";
export default defineComponent({
  setup() {
    onMounted(() => {
      new Cesium.Viewer('container');
    });
    return {};
  },
});
</script>
<style scoped lang="less">
#container {
  width: 100%;
  height: 100%;
}
</style>