一、前言

1.本文将在vue3的环境下整合最新版的cesium。
2.前提条件：已经安装node、vue。

二、步骤

环境检查

node和vue环境：版本是node：14.15.1、vue：3.12.1

创建项目

vue create cesium-vue3

vue create appname是创建项目的命令，3版本有这个新的创建项目的命令；cesium-vue3 是项目名。

选择安装的组件

1.default是默认的，最后一个可以自己选择，选择后还可以选择保存配置，以后就可以重复使用，不用每次创建项目都手动选择。我这里的myset就是之前保存的选择的组件。这次我再手动选择一次。选择第三个，按回车键

2.带*号的说明选中，使用空格键进行选中，我这里选择babel，css、router。做个测试足够了。然后回车

3.有些配置项选择后就开始初始化项目了

4.初始化完成

5.然后使用编辑器打开项目，看你喜好，我使用webstorm。

安装cesium

cnpm install cesium --save

配置

1.vue3创建的项目默认是没有配置文件的，需要自己创建一个，vue3把配置都统一到一个文件了，这样简洁了许多。
在项目根目录新建文件：vue.config.js。

内容为：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

//导入
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'

module.exports = {
    // 基本路径
    publicPath: "./",
    // 输出文件目录
    outputDir: "dist",
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === "darwin",
        host: "0.0.0.0",
        //端口
        port: 10000,
        https: false,
        hotOnly: false
    },
    configureWebpack: {
        output: {
            sourcePrefix: ' '
        },
        amd: {
            toUrlUndefined: true
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve('src'),
                'cesium': path.resolve(__dirname, cesiumSource)
            }
        },
        plugins: [
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), 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: {
            unknownContextCritical: /^.\/.*$/,
            unknownContextCritical: false
        }
    }
};

2.在views中创建一个vue文件 Cesium.vue,内容：
这里有一个要注意的导入cesium的时候要使用
import * as Cesium from ‘cesium/Cesium’
import * as widgets from “cesium/Widgets/widgets.css”;
这是新版本的导入方式。

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

<script>
  import * as Cesium from 'cesium/Cesium'
  import * as widgets from "cesium/Widgets/widgets.css";

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

<style scoped>
</style>

3.修改路由router.js，多余的删除，最后如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Cesium from './views/Cesium'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Cesium',
      component: Cesium
    }
  ]
})

4.把多余的那些home、about删了，干净些。
App.vue

运行项目

npm run serve

打开浏览器查看

三、总结

1.最总要的就是那个配置文件。
2.欢迎互相学习，交流讨论，本人的微信：huangchuanxiaa。