一分钟搭建 Vite + Cesium 开发环境
Posted nshen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一分钟搭建 Vite + Cesium 开发环境相关的知识，希望对你有一定的参考价值。
⚠ 2021年4月1日更新：10秒钟搭建 Vite + Cesium 开发环境
创建目录
mkdir cesium-vite-test
cd cesium-vite-test/创建 package.json
yarn init -y安装依赖
yarn add -D cesium vite vite-plugin-cesium由于 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()],
});在 package.json 中加入 dev 和 build 命令
"scripts": {
"dev": "vite",
"build": "vite build"
},配置完成分割线。
可以开始写代码开发了。
src/index.js
import { Viewer } from \'cesium\';
import "./css/main.css";
const viewer = new Viewer(\'cesiumContainer\');index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cesium-vite</title>
<script type="module" src="/src/index.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
</html>src/css/main.css
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}运行 yarn dev ，哒哒完成。
完整代码请看 vite-cesium-demo 喜欢请去点个赞，谢谢。
以上是关于一分钟搭建 Vite + Cesium 开发环境的主要内容，如果未能解决你的问题，请参考以下文章