Vue3 + ts + Cesium环境配置

安装好cesium后，配置vue.config.js

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

let cesiumSource = "./node_modules/cesium/Source"
let cesiumWorkers = "Workers"
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                "@": path.resolve("src"),
            },
        },
        plugins: [
            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, "ThirdParty/Workers"),
                to: "ThirdParty/Workers",
            },]),
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify("./"),
            }),
        ],
        module: {
            unknownContextCritical: false,
            unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
        },
    },
}

创建一个cesium容器

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

<script setup lang='ts'>
import { onMounted } from "vue";
import * as Cesium from "cesium"
import "cesium/Build/Cesium/Widgets/widgets.css"

onMounted(()=>{
  const viewer = new Cesium.Viewer("cesiumContainer")
})
</script>

<style scoped>
  #cesiumContainer{
    width: 100%;
    height: 100%;
  }
</style>

运行后会出现如下错误

Module parse failed: Unexpected token (6357:57)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| function getWorker(options = {}) {
> return new Worker(new URL(workerData.scripts[0], import.meta.url), options);
| }
|

需要安装loader

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

 在vue.config.js文件module中添加：

rules: [
    {
        test: /\.js$/,
        use: {
            loader: '@open-wc/webpack-import-meta-loader',
        },
    },
]

解决