Based on CesiumGS/cesium-webpack-example , this is a minimal example of how to use Cesium with vite.
You can clone this repo and use it as a starting point.
npm install
npm run devAlternatively, to set up something similar from scratch, using npm create you would basically do the following:
npm create vite@latest cesium-vite-example
cd cesium-vite-examplenpm install cesium
npm install -D @rollup/plugin-node-resolveCreate a vite config and use the rollup plugin to make Cesium's static assets available to the web app:
vite.config.js
import { viteStaticCopy } from 'vite-plugin-static-copy'
const cesiumSrcDir = 'node_modules/cesium/Build/Cesium'
const cesiumDestDir = 'static/Cesium'
export default {
plugins: [
viteStaticCopy({
targets: [
{
src: `${cesiumSrcDir}/Workers`,
dest: cesiumDestDir,
},
{
src: `${cesiumSrcDir}/ThirdParty`,
dest: cesiumDestDir,
},
{
src: `${cesiumSrcDir}/Assets`,
dest: cesiumDestDir,
},
{
src: `${cesiumSrcDir}/Widgets`,
dest: cesiumDestDir,
},
],
}),
],
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="cesiumContainer"></div>
</body>
<script>
// The URL on your server where CesiumJS's static files are hosted.
window.CESIUM_BASE_URL = 'static/Cesium'
</script>
<script type="module" src="/src/main.js"></script>
</html>