Vite+Vue3+Cesium环境搭建（学习）

眼底流转天上月

已于 2024-05-15 09:36:55 修改

阅读量1.1k

点赞数 21

分类专栏： Cesium 文章标签：学习

于 2024-02-22 11:07:39 首次发布

本文链接：https://blog.csdn.net/m0_60030015/article/details/136226022

版权

Cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.前提要求

Node.js版本需要14.18+，16+，建议将Node升级成最新稳定版本

2.设置源，查看node与npm版本

D:\workspace>npm config set registry https://registry.npm.taobao.org
D:\workspace>node -v
v18.16.0
D:\workspace>npm -v
9.5.1

3.使用Vite搭建vue3项目

npm create vite@latest

执行上面命令后，如未安装Vite，终端回提示安装，输入y即可安装，然后选择使用vue，选择使用typescript

4.安装相关配置

cd 项目名称

npm install

5.引入Cesium插件

npm i cesium@1.99 vite-plugin-cesium

打开vite.config.js，最后配置改成这样：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import cesium from 'vite-plugin-cesium';

export default defineConfig({

plugins: [vue(),cesium()]

});

打开src/app.vue，最后改成这样：

<template>

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

</template>

<script setup>

import * as Cesium from 'cesium';

import { onMounted } from 'vue';

onMounted(() => {

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxMGQyMjU1OC0wMGZiLTRiYTItYmUwYy0yM2Y0ZTJhNTZmZmIiLCJpZCI6MTk3MDgyLCJpYXQiOjE3MDg1Njk4OTR9.oztgePDdtybLtGg_COrgTcrcrQq4FAWNJtczQvJ_Suk';

const viewer = new Cesium.Viewer('cesiumContainer');

});

</script>

<style scoped></style>

注意：Token需自己注册，上面这个可能会失效

6.编译运行

cd demo //demo是项目名

npm insatll

npm run dev

打开main.js文件，注释掉style.css

import { createApp } from 'vue'

//import './style.css'

import App from './App.vue'

createApp(App).mount('#app')

如需设置满屏，可在index.html中设置style

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

最后界面效果如下

眼底流转天上月

关注

21
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
Vite+Vue3+Cesium环境搭建（学习）

执行上面命令后，如未安装Vite，终端回提示安装，输入y即可安装，然后选择使用vue，选择使用typescript。Node.js版本需要14.18+，16+，建议将Node升级成最新稳定版本。如需设置满屏，可在index.html中设置style。cd demo //demo是项目名。打开main.js文件，注释掉style.css。
复制链接

扫一扫