# MapGIS-Pan-Spatial-Map-App-Extension 

**Repository Path**: osmapgis/map-gis-pan-spatial-map-app-extension

## Basic Information

- **Project Name**: MapGIS-Pan-Spatial-Map-App-Extension 
- **Description**: 全空间一张图应用扩展模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: 10.6.6.10
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-31
- **Last Updated**: 2023-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微应用

本项目是一个接入 qiankun 主应用的微应用模板，任何人都可以基于它进行快速扩展

> https://qiankun.umijs.org/zh/guide

## 一、准备工作

### 1.1 取名

给微应用起一个专用的名字，作为微应用路由的一部分，会展示到浏览器地址栏中，如模板中的**extension**，后面所有涉及到 extension 的地方都需要采用该专用名字

### 1.2 替换名称

#### 1.2.1 替换项目名

`package.json`的 name，将其中的 extension 进行替换

```json
{
  "name": "@mapgis/pan-spatial-map-app-extension"
  // ...
}
```

#### 1.2.2 替换路由基地址

`src/router/index.js`的路由 base，将其中的 extension 进行替换

```javascript
base: window.__POWERED_BY_QIANKUN__
    ? `${window._CONFIG['routerBase']}app/extension/`
    : `${window._CONFIG['routerBase']}app/extension/`,
```

> 注意：前面的**${window.\_CONFIG['routerBase']}**必须与主应用路由基地址保持一致！！！

#### 1.2.3 替换静态资源访问路径

`.env.backend`的`VUE_APP_CONTEXT_PATH`，将其中的 extension 进行替换

```properties
VUE_APP_CONTEXT_PATH=/psmap/static/web-apps/extension/
```

## 二、微应用开发和运行

### 2.1 微应用开发

微应用本身具备完全自主权，可以独立开发，所以你完全可以像以往一样采用任何你喜欢的技术来实现你想要的效果，本模板基于 MapGIS UI 提供了主题切换功能，建议开发者也采用该 UI 库进行开发

### 2.2 独立运行

在集成到主应用之前，开发者可以通过命令`yarn serve`启动项目

### 2.3 集中到主应用运行

#### 2.3.1 新增扩展应用路由

在《应用管理/应用配置/扩展应用路由配置》中，新增扩展应用

| 应用名称  | 应用入口         | 应用路由                 |
| --------- | ---------------- | ------------------------ |
| extension | //localhost:9000 | /psmap/web/app/extension |

> 应用名称：可以随意
>
> 应用入口：确保端口正确，不需要添加前面的**http:**，直接以**//**开头即可，采用完整地址也没问题
>
> 应用路由：需要与主应用路由基地址保持一致，最后不需要加**/**

访问：http://{ip}:{port}/psmap/web/app/extension

## 三、微应用打包部署和运行

### 3.1 微应用打包

运行 `yarn build:backend` 完成微应用打包

### 3.2 微应用部署

按照`VUE_APP_CONTEXT_PATH=/psmap/static/web-apps/extension`指向的路径，将`dist`里面的内容拷贝到主应用包的`resource/static/web-apps/extension`下

### 3.3 微应用运行

配置运行同[2.3](# 2.3 集中到主应用运行)，只需要在配置应用路由的时候，修改应用路由为`/psmap/static/web-apps/extension/index.html`，如下：

| 应用名称  | 应用入口                                    | 应用路由                 |
| --------- | ------------------------------------------- | ------------------------ |
| extension | /psmap/static/web-apps/extension/index.html | /psmap/web/app/extension |

访问：http://{ip}:{port}/psmap/web/app/extension

### 3.4 以子路由应用运行

不同于微应用，本项目还可以以子路由应用独立运行，不需要配置应用路由

访问：http://{ip}:{port}/psmap/web/app/extension

二者的区别如下：

|              | 微前端应用            | 子路由应用          |
| ------------ | --------------------- | ------------------- |
| 运行方式     | 嵌入到主应用运行      | 独立运行            |
| 资源加载     | 主应用资源+子应用资源 | 子应用资源          |
| 路由匹配     | 主应用路由匹配        | 子应用路由匹配      |
| 集成开发     | 支持开发嵌入到主应用  | -                   |
| 路由地址     | /psmap/web/app/开头   | /psmap/web/app/开头 |
| 主子应用通信 | 支持                  | -                   |
| 页面组合     | 支持                  | -                   |

因本项目二者应用部署方式都支持，所以开发人员可以根据自己的需要进行选择，当我们不在后台配置应用路由的时候，将会以子路由应用方式运行，当我们进行了配置的时候，则会以微前端应用路由方式运行，不管以哪种方式运行，最终在子应用的路由都将是/psmap/web/app/开头