搭建第一个 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

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

<script >
import * as Cesium from "cesium";
import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Cesium.VERSION", Cesium.VERSION);
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxNTFlNWVmMC1jOWRhLTQyMDktOTY4Ny02YTU5YWFlMGYwY2IiLCJpZCI6OTQzNDQsImlhdCI6MTY1Mjg4ODEyNn0.g2vq1qq_rdfZeRTy73nBkEDzhMIM4upkYcbIdFYnCiQ";

      var viewer = new Cesium.Viewer("cesiumContainer", {
        // animation: false, // 是否开启动画
        // timeline: false, // 是否显示时间轴
      });
      viewer.scene.globe.show = true;

      // This works
      viewer.infoBox.frame.removeAttribute("sandbox"); // 必须要加，不然有报错： Can’t run scripts in infobox

      // So does this if you want to limit other things but allow scripts
      //viewer.infoBox.frame.setAttribute("sandbox", "allow-same-origin allow-popups allow-forms allow-scripts");

      // In both cases, you need to do this to force a reload for the change to take affect.
      viewer.infoBox.frame.src = "about:blank";

      viewer.selectedEntity = new Cesium.Entity({
        id: "YouTube video",
        description:
          '<div style="height:315px;"><iframe width=100% height="315" src="https://www.youtube.com/embed/wo5rWeeZxvo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>',
      });
    });
  },
};
</script>

<style>
</style>