vue2（vue-cli3x[vue.config.js]）使用cesium配置过程

1.参考文章：

cesium + vue初始化项目 - 掘金

vue+cesium初探（一）之vue环境配置_湫沐椿风-CSDN博客_vue 配置cesium

【vue-cesium】在vue上使用cesium开发三维地图（二） - 掘金

解决in ./node_modules/cesium/Source/ThirdParty/zip.js_weixin_42530658的博客-CSDN博客

2.流程

①创建vue2项目

这边使用的是vue-cli3x

vue create XXXX

②npm安装cesium

直接安装最新版就行

npm i cesium -S

③安装 import.meta 语法loader解析器

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

因为cesium内有文件使用了meta语法，所以要安装 import.meta 语法loader解析器，

这步很重要，不然启动项目时会出这个问题

in ./node_modules/cesium/Source/ThirdParty/zip.js

④配置webpack环境【vue.config.js】

因为自vue-cli3x起，脚手架将webpack进行封装内置，摒弃了webpack.config.js的配置

都将webpack的配置一并写入项目根目录下的vue.config.js文件中

vue.config.js文件内容如下：

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  configureWebpack: {
    amd: {
      // Enable webpack-friendly use of require in Cesium
      // Tells Cesium that the version of AMD webpack uses to evaluate require statements is not compliant with the standard toUrl function
      toUrlUndefined: true
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: '@open-wc/webpack-import-meta-loader',
          },
          // include: path.resolve(__dirname, 'node_modules/cesium/Source')
        },
      ],
      unknownContextCritical: false
    },
    plugins: [
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium/Workers',
          to: 'cesium/Workers'
        }
      ]),
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium/ThirdParty',
          to: 'cesium/ThirdParty'
        }
      ]),
      new CopyWebpackPlugin([
        { from: 'node_modules/cesium/Build/Cesium/Assets', to: 'cesium/Assets' }
      ]),
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium/Widgets',
          to: 'cesium/Widgets'
        }
      ]),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify('./cesium')
      })
    ],
  }
}

⑤在main.js文件中全局引入挂载cesium对象

// 如果vue.config.js中不配置别名，使用下面的方式按路径引入
const cesium = require('cesium/Build/Cesium/Cesium.js');
const widgets = require('cesium/Build/Cesium/Widgets/widgets.css');

Vue.prototype.cesium = cesium;
Vue.prototype.widgets = widgets;

中途可能会有些eslint的语法报错，自行解决

⑥测试代码以及调试结果

将App.vue直接替换以下代码

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
export default {
  name: "Home",
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let Cesium = this.cesium;

      let viewer = new Cesium.Viewer("cesiumContainer");
      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
      Cesium.Ion.defaultAccessToken =你的token
    },
  },
};
</script>
 
<style lang='scss' scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>