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内有文件使用npm install @open-wc/webpack-import-meta-loader --save-dev了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 functiontoUrlUndefined: 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 assetsCESIUM_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>