构建一个 Vite + Vue3 项目 开发Cesium

搭建第一个 Vite 项目

# yarn
yarn create vite my-vue-app --template vue

yarn 安装 cesium

yarn add cesium # 这个是给开发时 vite 的 esbuild 找模块用的
# yarn add @types/cesium -D # 这个是给智能提示用的，例如 import { Viewer } from 'cesium'

安装 vite 插件

yarn add -D vite vite-plugin-cesium

配置 vite.config.js

由于 Cesium 不是一个普通的 npm 包，需要依赖一些 css ，图片，json 啥的。我们要参考 Cesium 官方的 webpack 教程 来做一堆额外的工作。

值得庆幸的是现在 Vite 有了 vite-plugin-cesium 插件，来帮我们完成这些配置。

vite.config.js

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium'; // 引入插件
export default defineConfig({
    plugins: [cesium()],
});

使用

import * as Cesium from "cesium";

第一个demo

报错：Can’t run scripts in infobox

官方方法

App.vue