vue3+ts+cesium環境配置遇到得坑.

首先我們先創建個vue3+ts項目

vue create cesium_dome

然后引入cesium

npm i cesium --save

在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/,
    },
  },
};

創建個index.vue

<template>
  <div class="home" id="cesiumContainer">
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import {
  Viewer,
} from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
export default defineComponent({
  name: 'Home',
  setup(){
    onMounted(()=>{
        new Viewer('cesiumContainer');
    })
  }
});
</script>
<style scoped>
.home{
  width: 100%;
  height: 500px;
}
</style>

啟動會出現以下問題

 

由於在 ./node_modules/cesium/Source/ThirdParty/zip.js 文件中使用了 import.meta 語法，webpack 默認不支持，在進行項目構建時，會報如下錯誤，提示信息需要添加 loader。

接下來我們安裝 loader

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

然后在vue.config.js中添加(在module中[…]后面)

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

然后重啟