vue3 cesium安装配置教程（共5种方式-推荐第3-4种）

vue3 cesium安装配置教程

LEILEI18A

6599人浏览 · 2022-07-13 17:23:09

LEILEI18A · 2022-07-13 17:23:09 发布

vue3 vue-cli（5+） cesium（1.90+）安装配置教程（共5种方式-推荐第3-4种）

0.前提

[0] vue3作为3大前端框架之一，且上手较为简单，再结合element-plus等样式库插件，为100人团队以下，且开发网站并不像taobao那样复杂的话，可以推荐使用它。当然使用jQuery或者手撸代码依然可以。并且cesium的官方代码大部分都是通过<script>引入的，手撸js代码！不利于快速搭建复杂的网站代码！

[1] 安装环境为

nodejs: 16.14+、npm: 8.5.0+

vue-cli: 5.0+、vue3、cesium: 1.90+

[2] node安装以及相关配置，百度即可！

[3] 注意：vue与cesium的搭配，网上打包有问题，个人尝试了一下确实有问题！然后解决这个问题有5种方法，尝试了4种，未来可能第5种比较适合吧。这篇博客写的挺好的。其实cesium的github官方仓库中有webpack的配置https://github.com/CesiumGS/cesium-webpack-example

(1) 第1种方法：vue-cli-plugin-cesium [2年不更新了]

(2) 第2种方法： vue-cesium插件，像其他插件那样使用即可，确实提高生产力，但是不推荐，还是推荐官方库。（后面可能会尝试一下！）

(3) 第3种方法：直接在index.html中采用<script>方式引入(成功)，适用于1.90以上所有版本。

这里注意：npm install cesium或者直接下载cesium包，只复制build中2个文件中的任意1个Cesium 到 vue项目中public文件夹中，重命名为Cesium，然后在index.html中写入如下代码：，并在package.json中写入如下代码：~~，并且在vue.config.js中配置下面的参数（见下面webpack配置参数，~~构建时会把 public 文件夹下的资源原封不动复制到发布文件夹下，因此复制到public的Cesium文件夹不需要再配置vue.config.js参数）：（为什么Source不可以，可能是因为public是已经打包好的，而source未打包，有些教程说：由于 npm 下载的 cesium 包中已经有官方打包好的构建版本库了，没有必要再次将 CesiumJS 源代码再次打包，而应将其作为外部依赖，不打包，使用 CDN 或 public 文件夹下的库程序、资源。）

(4) 第4种方法：修改vue.config.js，即：使用webpack的方法打包，着重参考官方github的example链接：https://github.com/CesiumGS/cesium-webpack-example，适用于1.90以上所有版本！在未参考这个链接之前，报https zlib等的问题，以及webpack版本导致的问题，可查看解析(Resolve) | webpack 中文文档，webpack版本带来的polyfill问题。官方着重修改了：fallback: { "https": false, "zlib": false, "http": false, "url": false }

(5) 第5种方法：vite vue3 cesium 这种方式据说会比较方便，尤其是vite开发时启动速度快！可能是后面的1个方向吧，不清楚wsam会不会逐渐起来呢！

--------------------------------------------------------------------------------------------------

1.vue-cli及相关库安装（第4种方式）

npm intsall -g vue-cli

再选择某个路径eg d:\vue3_cesium

vue create vue3_cesium，新建vue3_cesium的项目，选择vue3即可

进入vue3_cesium路径后，执行

npm install cesium

2.vue3-cesium配置（第4种方式）

[1] 配置vue.config.js（即webpack的相关设置）

注意：打包静态文件默认存储位置public。

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/' //按理说应该是未打包的
// 此处必需，因为高版本cesium没有这个Workers报错。必写-1
const cesiumWorkers = '../Build/Cesium/Workers'

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  outputDir: "dist", // 输出文件目录
  lintOnSave: false, // eslint 是否在保存时检查 关闭语法检查
  // assetsDir: 'static', // 配置js、css静态资源二级目录的位置
  
  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        '@': path.resolve('src'),
        //'cesium': path.resolve(__dirname, cesiumSource),//如果有依赖cesium的库就需要下面这种。
        'cesium': path.resolve(__dirname, './node_modules/cesium/')
      },
      // 参考官方github的，我不太懂webpack，所以都不知道咋解决https zlib问题  必写-2
      fallback: { "https": false, "zlib": false, "http": false, "url": false },
    },
    plugins: [
      // 对于webpack版本此处有不同配置，webpack低版本5.x执行下面4行注释的代码，对于webpack高版本9.x及以上，patterns是可以的。
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
          { from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' },//需要整个ThirdParty
        ],
      }),
      // 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'), to: 'ThirdParty'}]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./')
        // CopyWebpackPlugin from的绝对路径
      })
    ],
    // 不使用这个loader，也就不用安装
    
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: "@open-wc/webpack-import-meta-loader",
          },
        },
        {
          test: /\.(glb|gltf)?$/,
          use: {
            loader: "url-loader",
          },
        },
      ],
    },
  }
})

3.相关代码（第4种方式）

[1] app.vue //当然还有script setup语法糖简化//

<template>
  <HelloWorld></HelloWorld>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { onMounted, reactive, ref } from 'vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup() {
    return {}
  }
}
</script>

[2] HelloWorld.vue 可以再添加一些参数等；当然后面还得探索如何设计更复杂的页面！

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

<script>
    // import * as Cesium from "cesium/Cesium.js";
    // 改变了cesium alias的路径，采用推荐的import cesium，自动导入cesium/source/Cesium.js
    import * as Cesium from "cesium";
    // 导入cesium的css样式库，其实有点类似element-plus库全部导入时的样子
    //import "cesium/Widgets/widgets.css";
    import "cesium/Source/Widgets/widgets.css";
    import {onMounted} from 'vue'
    // vue2中是export default Vue.extend; vue3中是 export default defineComponent
    export default{
        name:'HelloWorld',
        
        setup(){
            // 只有等元素挂载渲染后，才可以将 html元素与cesium的viewer挂载
            onMounted(() => {
                let viewer = new Cesium.Viewer('CesiumContainer')
            })
            return {}
        },
    }
</script>

<style scoped>
    #CesiumContainer{
        widows: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        /* overflow: hidden; */
    }
</style>