vue3+cesium项目搭建

原创

已于 2023-07-10 16:51:40 修改 · 5.4k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis #web

于 2023-07-10 14:36:53 首次发布

本文介绍了如何在Vue3项目中搭建Cesium环境，包括选用Cesium的特定版本避免冲突，配置vue.config.js，以及在组件中创建球体的示例代码。在过程中提到了cesiumWorkers、Assets、Widgets、ThirdParty等关键路径的复制，并强调了CesiumBaseURL的设置和Viewer的初始化需要Ion访问令牌。

前言

最近需要在一个Vue3的项目中使用到cesium，对于一个cesium没有太多了解的人来说，还是比较麻烦的，本篇博文就将自己在这个过程踩的坑记录下来，有需要的可以看一下

1、vue+cesium框架搭建

2、项目运行起来后，球体不出现，只出现星空

持续ing…

一、vue3+Cesium 项目搭建

1、初始化vue3项目框架 vue create project-name
这是最基础的一步，首先我们需要先生成一个vue3框架，这里我采用的是 vue create project-name ，并且选择了vue3-simple模式，这里并没有选择其他太复杂的东西，如果有其他需求，可以自定义加载router、vuex、less、等其他插件。
2、配置cesium

项目初始化完成之后，下面我们执行 npm run serve这个命令，确保项目能够正常启动
接下来执行 npm install cesium 命令，这个时候敲重点，很多人执行后，就出现问题了，当时我也是遇到了问题，初始化之后，项目一直报错，原因是因为cesium的版本如果太高的，webpack 或者其他相关依赖就有可能起冲突
我这里用的cesium版本是 ^1.83.0,如果想要指定版本下载cesium的话，可以运行 npm install -S cesium@1.83.0这个命令
安装好cesium之后，我们需要打开 vue.config.js这个文件，进行相关配置

const {
   
    defineConfig } = require("@vue/cli-service");

const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const path = require("path");

let cesiumSource = "./node_modules/cesium/Source/";
const cesiumWorkers = "../Build/Cesium/Workers";

module.exports = defineConfig({
   
   
  transpileDependencies: true,
  publicPath: "./",
  outputDir: "dist", // 输出文件目录
  lintOnSave: false, // eslint 是否在保存时检查 关闭语法检查