mars3d入门环境配置部署踩坑

木纸呢

于 2022-08-03 11:10:59 发布

阅读量1.5k

点赞数 1

文章标签： 3d vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44757213/article/details/126136660

版权

本文详细介绍了如何在Vue2项目中集成Mars3D，包括通过npm安装依赖库，全局导入和配置Vue.config.js，以及创建一个简单的地球展示。在配置Webpack时，特别注意了cesium资源的拷贝和设置，确保项目的正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 使用npm安装依赖库

//安装mars3d主库
npm install mars3d --save

//安装mars3d插件（按需安装）
npm install mars3d-space --save

//安装copy-webpack-plugin(!本插件在第3步中使用，根据webpack版本安装，不匹配的版本可能出错，这一步比较玄学，如果报错80%在这里)
npm install copy-webpack-plugin --save-dev

2.在main.js全局导入或者在使用mars3d的文件中导入（这一步可以跳过，极简地球只需要导入mars3d主库即可，其他需要时使用）

//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";

//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";

//导入mars3d插件（按需使用，需要先npm install）
import "mars3d-space";

3.在vue.config.js 添加配置

//webpack也是需要导入的，
const webpack = require('webpack')
//导入copy-webpack-plugin插件
const CopyWebpackPlugin = require('copy-webpack-plugin')

// 在module.exports中添加下列配置
configureWebpack: (config) => {