# qiankun-demo 

**Repository Path**: louis100/qiankun-demo

## Basic Information

- **Project Name**: qiankun-demo 
- **Description**: qiankun2 + react18 + webpack5 搭建的一个微前端项目demo
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2024-09-20
- **Last Updated**: 2025-05-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: qiankun, 微前端, React

## README

# qiankun-demo 

## 介绍
qiankun2 + react18 + webpack5 搭建的一个微前端项目demo

### 效果图如下：

主应用界面：http://localhost:3000，如下图：
![主应用](effectImgs/readme/image-1.png)

子应用界面：http://localhost:3001，如下图：
![子应用界面](effectImgs/readme/image-3.png)

在主应用中加载子应用：http://localhost:3000/sub1，如下图：
![在主应用中加载子应用](effectImgs/readme/image-2.png)


## 软件架构
软件架构说明
1. 主应用：基于 react18 + webpack5 + qiankun2 + react-router-dom
2. 子应用：基于 react18 + webpack5 + qiankun2
1. `git clone https://gitee.com/louis100/qiankun-demo.git`


## 安装教程

1. 克隆到本地： `git clone https://gitee.com/louis100/qiankun-demo.git`
2. 进入 main 目录，安装依赖：`pnpm i`
3. 进入 sub1 目录，安装依赖：`pnpm i`





## 使用说明

1.  启动主应用：进入 main 目录，执行：`pnpm run start`
2.  启动子应用：进入 sub1 目录，执行：`pnpm run start`
3.  访问子应用，验证子应用是否正常：[http://localhost:3001](http://localhost:3001)
4.  访问主应用，验证主应用是否正常：[http://localhost:3000](http://localhost:3000)
5.  在主应用中点击”sub1”加载子应用或则直接访问：[http://localhost:3000/sub1](http://localhost:3000/sub1)


## 遗留问题

1. 单独访问子应用时，图片和 svg 均能正常显示，但是通过 主应用加载子应用时，图片正常，svg 无法显示