Vue3.x +Vite引入第三方Cesium包的配置方法

2023-10-09 10:11:16

1. 简介

在基于Cesium的应用开发过程中，经常会遇到要用的库并不是标准Cesium官方包的情况，官方包的Vue集成是相当成熟的，可以查看的资料也比较多，但是对于非官方的包引用集成，特别是在Vue3+Vite环境中，则是很少被人讨论到。本文针对在实际项目中，介绍如何在Vue3.x+Vite+TS环境引入第三方修改后的Cesium包进行集成开发的配置方法。

2. Vue3.x+Vite环境搭建

安装vite：cnpm install vite@latest

创建项目：yarn create vite cesiumvue --vue-ts

创建项目的选择项并不多，这里不细化介绍，总体是选择框架为vue，模板选择vue-ts，注意：这个时候创建的项目模板采用了setup-script形式。

运行项目：npm run dev 访问地址是http://localhost:3000/

3. 配置第三方Cesium包

这里说的配置Cesium不是通过安装Cesium的 npm包或者引入Vue-Cesium插件或者ViteCesium插件的方式来做集成，而是将第三方修改过的Cesium包（如浙江中海达修改后的DTGlobe开发包）引入到Vite框架下，为了方便本教程测试我使用了Cesium官网1.88版本包，Build/Cesium目录下文件。

1）包文件组织

在vite项目的public文件夹下新建lib文件夹，并将分发的Cesium包文件拷贝到该目录下，同时为了更好的自动补全和代码提示，在src目录下新建一个types文件夹，把新版的Cesium.d.ts拷贝进去（或者引入的你需要集成的二次开发包分发者提供的ts定义文件），因为tsconfig.json中的include中已经配置了搜索src下所有的d.ts文件定义，这样项目就能自动找到Cesium的导出对象，从而在开发过程中进行智能提示。这里没通过安装@types/Cesium来让vscode支持自动提示是为了更好的展示本文方法的有效性。

2）index.html文件修改

在index.html中添加Cesium的相关引用代码

 <script src="/lib/Cesium/Cesium.js"></script>
 <script>window['CESIUM_BASE_URL'] = '/lib/Cesium/'</script>
 <link rel="stylesheet" href="/lib/Cesium/Widgets/widgets.css">

注意：a.引入Cesium.js会导致在开发环境下，浏览器加载两次Cesium.js文件，但是如果这里删除的话，那么build后需要在html中添加Cesium.js的引入；b.这里需要指定CESIUM_BASE_URL不然Cesium无法定位内部资源位置

3）修改Vite配置文件vite.config.ts

首先本集成方案中需要依赖vite的外部全局变量引入插件：rollup-plugin-external-globals，其次因为ts中node对象无法自动提示，本配置文件中需要用到path对象，所以安装@types/node来避免检查错误。

rollup-plugin-external-globals安装方法：

cnpm install -S rollup-plugin-external-globals

path类型安装方法：

cnpm i @types/node -D

最后修改vite.config.ts，主要注意注释中的7个地方。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';//lmw add 1
import externalGlobals from 'rollup-plugin-external-globals'//lmw add 2

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      "cesium":path.resolve(__dirname,"./public/lib/Cesium/Cesium.js")//lmw add 3 告诉vite未编译时如何引入cesium
    }
  },
  server:{
    fs:{
      strict:false //lmw add 4 消除html文件中引入cesium的警告
    }
  },
  optimizeDeps:{
    include:['cesium']//lmw add 5 构建cesium.js
  },
  build:{
    rollupOptions:{
      external:['cesium'],//lmw add 6 不让cesium再被编译
      plugins:[
        externalGlobals({
          "cesium":"Cesium"//lmw add 7 用引入的Cesium对应代码中的cesium
        })
      ]
    }
  }
})

4）程序中使用Cesium对象

import { Viewer } from 'cesium';
import * as Cesium from 'cesium';

码农公寓