首先我们先创建个vue项目

vue create cesium_dome

然后引入cesium

npm i cesium --save

在vue.config.js配置(没有就自己在项目根目录创建一个)

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');
 
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const cesiumSource = './node_modules/cesium/Source'
 
function resolve(dir) {
  return path.join(__dirname, dir);
}
 
module.exports = {
  devServer: {
    port: 8888,
    open: true,
  
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' ' // 1 让webpack 正确处理多行字符串配置 amd参数
    },
    amd: { // 2
      toUrlUndefined: true // webpack在cesium中能友好的使用require
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'components': path.resolve('src/components'),
        'assets': path.resolve('src/assets'),
        'views': path.resolve('src/views'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [ // 4
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), 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({ // 5
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ], 
  }
};

然后在main.js添加

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
var cesium = require('cesium/Cesium.js');
var widgets = require('cesium//Widgets/widgets.css');
 
// 如果vue.config.js中不配置别名，就要用下面的方式按路径引入
// var cesium = require('cesium/Build/Cesium/Cesium.js');
// var widgets = require('cesium/Build/Cesium/Widgets/widgets.css');
 
Vue.prototype.cesium = cesium
Vue.prototype.widgets = widgets
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

创建个index.vue

<template>
  <div
    id="container"
    class="box"
  >
    <div id="cesiumContainer"></div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
    }
  },
  methods: {
    init () {
      const Cesium = this.cesium
      const viewer = new Cesium.Viewer('cesiumContainer');
      viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
    }
  },
  mounted () {
    this.init()
  }
}
</script>
 
<style scoped lang="scss">
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>

启动会出现以下问题

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

由于在 ./node_modules/cesium/Source/ThirdParty/zip.js 文件中使用了 import.meta 语法，webpack 默认不支持，在进行项目构建时，会报如下错误，提示信息需要添加 loader。

接下来我们安装 loader

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

yarn add @open-wc/webpack-import-meta-loader --dev

//二选一

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

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

然后我们再次运行

转载：https://blog.csdn.net/qq_44749616/article/details/120328371?utm_source=app&app_version=4.15.0&code=app_1562916241&uLinkId=usr1mkqgl919blen