Nuxtjs中集成Cesium

下载nuxtjs脚手架

npx create-nuxt-app <项目名>

下载Cesium依赖包（1.66版本）

npm intall cesium

集成Cesium

1.拷贝需要的Cesium文件到项目的静态文件夹

在项目文件夹下找到/node_modules/cesium/Build/Cesium文件夹，并复制粘贴到项目根目录的static静态文件夹中，并将Cesium中的Cesium.js文件删除。

2.引入Cesium的css样式文件cesium/Build/Cesium/Widgets/widgets.css

• 在Cesium视图所在的.vue文件中引入

• 在nuxt.config.js中全局引入

3.引入Cesium

const Cesium = require('cesium')

ES6方式引入

import * as Cesium from 'cesium'

按需引入

import { Viewer } from 'cesium'

4.初始化

// index.vue
this.viewer = new Cesium.Viewer('cesiumContainer')

配置引入文件类型编译

我将glb、glbf、3Dtitles等格式的文件放在assets文件夹中供Cesium引用，但引用时会报错，原因是nuxt的默认loader没有配置对这些文件格式的编译。因为nuxtjs对webpack配置进行了封装，所以我们应该在nuxt.config.js中找到并添加需要的文件格式。

// nuxt.config.js
build: {
    ...,
    extend(config, ctx) {
      // 添加可编译的glb和glbf文件类型
      const assetsLoader = config.module.rules.find(rule => rule.test.test('.png'));
      assetsLoader.test = /\.(png|jpe?g|gif|svg|webp|pdf|glb|gltf|json|geojson|topojson)$/i;

      return config;
    }
  }