在vue3项目中引入Cesium的最佳实践(转载)

基础引入方式的弊端

在本人以往的离线Cesium项目中，通常的做法是在下载完cesium依赖后，直接将node_modules/cesium/Build/Cesium文件夹复制到项目根目录的public路径下，这一过程依赖手动操作。如果cesium版本更新后，也要手动更新静态资源，如果忘记了这一步，通常会出现cesium渲染报错；解决这一问题让其自动化是本文的目的。

核心优化

1.静态资源自动复制

使用一种静态资源复制插件，实现将node_modules中的Cesium/Build/Cesium下的文件复制到public，替代我们的手动操作；

在vite.config.ts文件中增加如下配置：

import { fileURLToPath, URL } from 'node:url'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动化从node_modules中复制Cesium包到静态资源目录
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/cesium/Build/Cesium/Cesium.js',
          dest: 'libs/Cesium/'
        },
        {
          src: 'node_modules/cesium/Build/Cesium/Assets/*',
          dest: 'libs/Cesium/Assets/'
        },
        {
          src: 'node_modules/cesium/Build/Cesium/ThirdParty/*',
          dest: 'libs/Cesium/ThirdParty/'
        },
        {
          src: 'node_modules/cesium/Build/Cesium/Workers/*',
          dest: 'libs/Cesium/Workers/'
        },
        {
          src: 'node_modules/cesium/Build/Cesium/Widgets/*',
          dest: 'libs/Cesium/Widgets/'
        }
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

2.Cesium依赖外部化引入，不参与打包，优化打包时间

使用依赖外部化插件，html配置插件，将Cesium依赖外部化引入，不参与build过程，同时用插件实现在index.html中自动配置外部化的Cesium路径；

完整的vite.config.ts文件如下：

import { fileURLToPath, URL } from 'node:url'
import htmlConfig from 'vite-plugin-html-config'
import { viteExternalsPlugin } from 'vite-plugin-externals'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    htmlConfig({
      //外部化Cesium.js和Cesium样式文件
      headScripts: [
        {
          src: '/libs/Cesium/Cesium.js'
        }
      ],
      links: [
        {
          rel: 'stylesheet',
          href: '/libs/Cesium/Widgets/widgets.css'
        }
      ]
    }),
    viteExternalsPlugin(
      {
        // key 是要外部化的依赖名，value 是全局访问的名称，这里填写的是 'Cesium'
        cesium: 'Cesium'
      },
      {
        disableInServe: true //开发模式时不外部化
      }
    ),
    viteStaticCopy({
      targets: [
        // 自动化从node_modules中复制Cesium包到静态资源目录
        {
          src: 'node_modules/cesium/Build/Cesium/Cesium.js',
          dest: 'libs/Cesium/'
        },
        {
          src: 'node_modules/cesium/Build/Cesium/Assets/*',
          dest: 'libs/Cesium/Assets/'
        },
        {
          src: 'node_modules/cesium/Build/Cesium/ThirdParty/*',
          dest: 'libs/Cesium/ThirdParty/'
        },
        {
          src: 'node_modules/cesium/Build/Cesium/Workers/*',
          dest: 'libs/Cesium/Workers/'
        },
        {
          src: 'node_modules/cesium/Build/Cesium/Widgets/*',
          dest: 'libs/Cesium/Widgets/'
        }
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3.配置后运行项目进行测试报错：

在package.json中添加一项配置解决：

“type”:”module”

{
  "name": "cesium-demo-test-ts",
  "version": "0.0.0",
  "type":"module",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
  },
  "dependencies": {
    "cesium": "1.130.0",
    "pinia": "2.3.1",
    "sass": "1.89.1",
    "vue": "3.5.16",
    "vue-router": "4.5.1"
  },
  "devDependencies": {
    "@tsconfig/node18": "2.0.1",
    "@types/node": "18.19.110",
    "@vitejs/plugin-vue": "4.6.2",
    "@vue/tsconfig": "0.4.0",
    "npm-run-all": "4.1.5",
    "typescript": "5.0.4",
    "vite": "4.5.14",
    "vite-plugin-static-copy": "2.3.0",
    "vite-plugin-externals": "^0.6.2",
    "vite-plugin-html-config": "2.0.2",
    "vue-tsc": "1.8.27"
  }
}