基于vue3创建cesium项目

1.创建vue3项目

vue create vue3_cesium

2.安装cesium

进入项目目录后

npm i cesium --save

此时安装版本为1.94.3。在安装时可指定安装版本

3、配置vue.config.js

const { defineConfig } = require('@vue/cli-service')

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
let cesiumSource = './node_modules/cesium/Source'

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  outputDir: "dist", // 输出文件目录
  lintOnSave: false, // eslint 是否在保存时检查
  assetsDir: 'static', // 配置js、css静态资源二级目录的位置
  devServer: {
    proxy: {
      '/cnterrain20':{
        target:'http://10.0.200.201:8083'
      }
    }
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, 'Workers'), to: 'Workers' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
          { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' },
        ],
      }),
      // 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({
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: '@open-wc/webpack-import-meta-loader',
          },
        },
      ]
    },
  }

})

4.其他配置

对package.json中的eslintConfig配置中的rules项添加如下配置：

"no-unused-vars":"off"

安装其他工具

npm install @open-wc/webpack-import-meta-loader --save-dev
npm i node-sass@4.14.1 --save-dev
npm i sass-loader@10.1.0 --save-dev

5.引入

APP.vue代码如下：

<template>
  <div id="container"></div>
</template>

<script>


var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');
 
window.Cesium = Cesium
window.widgets = widgets


export default {
  name: 'APP',
  setup(){
  
  },
  mounted () {
    window.viewer = new Cesium.Viewer('container');
  }
}
</script>
<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
}
</style>

运行，结果如下

参考文章：

Vue3配置Cesium

vue3+cesium完整的实现及config配置

vue项目中未使用的变量报错问题及解决方式

cesium1.66+vue填坑记录