使用 vue-cli3+ 和 vue-cli-plugin-cesium 搭建项目记录

网上关于 webpack +cesium 的搭建记录很多，但是vue-cli的比较少。所以来记录使用vue-cli3+和vue-cli-plugin-cesium搭建项目的过程，其中还是有一些坑的。

风险：到目前为止 vue-cli-plugin-cesium 停留在了两年前 并没有进行维护和更新 。

1.安装 vue-cli-plugin-cesium

vue-cli-plugin-cesium：https://github.com/isboyjc/vue-cli-plugin-cesium 支持vue cli 3+版本，所以要先确定你的cli版本

 vue --version

安装vue-cli-plugin-cesium 

npm install vue-cli-plugin-cesium --save--dev

安装完成后我们要使用vue invoke来初始化这个插件

vue invoke vue-cli-plugin-cesium

在vue invoke过程中有三个询问。

1.选择cesium版本。

2.是否全局引入样式,该操作将自动在main.js引入widgets.css？

3.是否添加示例组件到项目components目录?

完成之后按道理，应该正常运行了。

但是我遇到了一个问题，由于我的cesium版本是1.85.0 所以报错：

Module parse failed: Unexpected token (1565:71) 

 由于在 ./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中添加：

  configureWebpack:(config) => {
    config.module.rules.push({
      test: /.js$/,
      include: path.resolve(__dirname, 'node_modules/cesium/Source'),
      use: { loader: require.resolve('@open-wc/webpack-import-meta-loader') }
    })}

最后运行你的项目，页面直接应用：

<template>
  <div class="map-box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script> 
export default {
  name: "", 
  mounted() {
    // var viewer = new Cesium.CesiumWidget('cesiumContainer')

    // eslint-disable-next-line no-undef
    var viewer = new Cesium.Viewer("cesiumContainer");
    
    // eslint-disable-next-line no-console
    console.log(viewer)
  }
};
</script> 
<style scoped>
  .map-box{
    width: 100%;
    height: 100%;
  }
  #cesiumContainer{
    width: 100%;
    height: 100%;
  }
</style>