vue3+vite+cesium安装配置

一、node安装配置

1、node下载安装

Node.js — 在任何地方运行 JavaScript (nodejs.org)

2、查看安装是否成功

cmd窗口运行

node -v

显示版本，证明安装成功

3、npm换源（淘宝源）

cmd窗口运行

npm config set registry https://registry.npmmirror.com/

4、查看换源是否成功

cmd窗口运行    

npm config get registry

显示当前源信息

5、pnpm安装（换源同理）

cmd窗口运行    

npm i pnpm -g

6、（可选）cnpm、yarn安装（换源同理）

7、查看版本号报错（ 无法加载文件xxxx.ps1，在此系统上禁止运行脚本）

powershell窗口运行

set-ExecutionPolicy -Scope CurrentUser

接着输入

remotesigned

赋予权限

二、vue3+vite+cesium安装配置

1、创建Vue3项目

cmd窗口运行

pnpm create vite 项目名

选择框架（vue+js）

2、安装cesium

cmd窗口运行

cd 项目名
pnpm i
pnpm i cesium@1.99 vite-plugin-cesium

3、修改vite.config.js文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()]
})

4、App.vue文件

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

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZmYyMTQ0My00OGMzLTQxMjgtOWZlYS0yZjNhZmY0OTM2Y2MiLCJpZCI6MTE2NDU3LCJpYXQiOjE2NzA1NTA3MTR9.Ghp4_AaAxhKZr4oJYemiTE4u5T-GIeJjcvCJb1CCjik'
  const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(), // 地形图层
    timeline: false, // 隐藏时间轴控件
    animation: false, // 隐藏动画控件
    geocoder: false, // 隐藏搜索按钮
    homeButton: false, // 隐藏初始视角控件
    sceneModePicker: false, // 隐藏投影方式控件
    baseLayerPicker: false, //隐藏图层选择控件
    navigationHelpButton: false, // 隐藏帮助按钮
    fullscreenButton: false, // 隐藏全屏按钮
  })
})
console.log(Cesium)
</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

5、修改main.js文件

注释掉 import './style.css'

6、运行

cmd窗口运行

npm run dev