# Mars3D微前端

**Repository Path**: hylab/mars3d-micro-app

## Basic Information

- **Project Name**: Mars3D微前端
- **Description**: 演示使用 micro-app 微前端框架加载 Mars3D 三维地球子应用，解决 Cesium 全局变量沙箱作用域丢失、ES Module 脚本无法执行、自定义元素高度塌陷及 WebGL 跨域安全错误等问题。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.hylab.cn/blog/detail/7494373718165164032
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-15
- **Last Updated**: 2026-08-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 使用 micro-app 微前端框架加载 Mars3D 三维地球应用

## 项目简介

本项目演示了如何使用京东 [micro-app](https://github.com/jd-opensource/micro-app) 微前端框架加载 Mars3D 三维地球子应用，并解决了在此过程中遇到的一系列问题，包括：

- Cesium 全局变量在 `with` 沙箱中作用域丢失
- ES Module 脚本在沙箱中无法执行
- `micro-app` 自定义元素高度为 0 导致 Canvas 无法渲染
- WebGL `texImage2D` 跨域安全错误

## 目录结构

```
mars3d-micro-app/
├── mars3d-test/          # 子应用：Mars3D 三维地球
│   ├── src/
│   │   ├── App.vue        # 地球初始化组件
│   │   ├── main.js        # 子应用入口
│   │   └── style.css
│   ├── vite.config.js     # vite-plugin-mars3d 配置
│   └── package.json
└── micro-app-test/        # 主应用：micro-app 基座
    ├── src/
    │   ├── App.vue        # 基座布局 + micro-app 标签
    │   ├── main.js        # microApp.start() 配置（核心）
    │   └── style.css
    ├── vite.config.js     # 代理配置
    └── package.json
```

## 技术栈

| 项目   | 技术栈                                               |
| ------ | ---------------------------------------------------- |
| 子应用 | Vue 3.5 + Vite 8 + mars3d 3.11 + mars3d-cesium 1.140 |
| 主应用 | Vue 3.5 + Vite 8 + @micro-zoe/micro-app 1.0-rc.30    |

## 快速开始

```bash
# 1. 启动子应用（端口 5173）
cd mars3d-test
npm install
npm run dev

# 2. 启动主应用（端口 5174）
cd micro-app-test
npm install
npm run dev

# 3. 打开浏览器访问 http://localhost:5174
```

## 相关链接

- **博客文章**：[使用 micro-app 加载 Mars3D 应用指南](https://www.hylab.cn/blog/detail/7494373718165164032)
- **项目源码**：[https://gitee.com/hylab/mars3d-micro-app](https://gitee.com/hylab/mars3d-micro-app)
- **micro-app 官网**：[https://github.com/jd-opensource/micro-app](https://github.com/jd-opensource/micro-app)
- **Mars3D 官网**：[http://mars3d.cn](http://mars3d.cn)