[JavaScript知识库]vue + cesium项目配置

下载资源

"dependencies": {
    "@types/cesium": "^1.67.14",
    "cesium": "^1.98.1",
    "assert": "^2.0.0",
    "browserify-zlib": "^0.2.0",
    "https-browserify": "^1.0.0",
    "path-browserify": "^1.0.1",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0",
    "util": "^0.12.4",
  },
  "devDependencies": {
    "@types/copy-webpack-plugin": "^8.0.1",
    "copy-webpack-plugin": "^5.0.1",
  },

配置vue.config.js

let cesiumSource = "./node_modules/cesium/Source";
let cesiumWorkers = "Cesium/Workers";
const webpack = require('webpack')
const path = require("path");
module.exports = {
	configureWebpack: {
		plugins: [
			new CopyWebpackPlugin([{
			  from: path.join(cesiumSource, cesiumWorkers),
			  to: "Workers"
			}, ]),
			new CopyWebpackPlugin([{
			  from: path.join(cesiumSource, "Assets"),
			  to: "Assets"
			}, ]),
			new CopyWebpackPlugin([{
			  from: path.join(cesiumSource, "Widgets"),
			  to: "Widgets"
			}, ]),
			new CopyWebpackPlugin([{
			  from: path.join(cesiumSource, "ThirdParty/Workers"),
			  to: "ThirdParty/Workers",
			}, ]),
			new webpack.DefinePlugin({
			  CESIUM_BASE_URL: JSON.stringify("./"),
			}),
		],
      resolve: {
        fallback: {
          "path": require.resolve("path-browserify"),
          "url": require.resolve("url/"),
          "zlib": require.resolve("browserify-zlib"),
          "https": require.resolve("https-browserify"),
          "http": require.resolve("stream-http"),
          "assert": require.resolve("assert/"),
          "util": require.resolve("util/"),
          "stream": require.resolve("stream-browserify")
        }
      },
	}
}

将node_module/cesium/Source/下的Workers目录和ThridParty目录（非必要） 拷贝到 public

Workers 必须，
ThridParty 使用压缩模型时需要

vue中使用

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

<script>
import { defineComponent, onMounted } from "@vue/runtime-core";
import "cesium/Source/Widgets/widgets.css";
import * as Cesium from 'cesium';
export default defineComponent({
  setup() {
    onMounted(() => {
      new Cesium.Viewer('cesiumContainer',{
        infoBox: false,
      })
    })
    return {};
  },
});
</script>

<style>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

效果图