深入理解qiankun微前端路由模式与部署方案

洪淼征

于 2025-06-02 09:06:15 发布

阅读量238

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00884/article/details/148375901

深入理解qiankun微前端路由模式与部署方案

qiankun Blazing fast, simple and complete solution for micro frontends. 项目地址: https://gitcode.com/gh_mirrors/qia/qiankun

前言

qiankun作为一款优秀的微前端框架，在实际应用中需要考虑路由模式和部署方案的选择。本文将深入探讨qiankun中不同路由模式的应用场景和注意事项，以及各种部署方案的实现细节，帮助开发者更好地构建微前端架构。

路由模式选择

基于pathname的路由区分

当主应用使用location.pathname来区分微应用时，微应用可以采用hash和history两种路由模式。

注册配置示例

registerMicroApps([
  {
    name: 'app',
    entry: 'http://localhost:8080',
    container: '#container',
    activeRule: '/app',
  },
]);

不同框架的适配情况

history模式：只需设置路由的base即可
hash模式：不同框架表现不一致

| 框架 | 主应用跳转/app/#/about | 特殊配置 | |---------------|--------------------------|--------------------------| | Vue Router | 响应about路由 | 无 | | React Router | 不响应about路由 | 无 | | Angular Router| 响应about路由 | 需要设置--base-href |

Angular应用的特殊处理

Angular应用需要修改package.json：

- "start": "ng serve",
+ "start": "ng serve --base-href /angular9",
- "build": "ng build",
+ "build": "ng build --base-href /angular9",

部署后可能遇到懒加载路由路径错误问题，有两种解决方案：

修改public-path.js：

__webpack_public_path__ = window.__POWERED_BY_QIANKUN__
  ? window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
  : `http://${ip}:${port}/`;

- "build": "ng build",
+ "build": "ng build --base-href /angular9 --deploy-url /angular9/",

基于hash的路由区分

当所有微应用都使用hash模式时，可以使用hash来区分微应用，主应用的路由模式不限。

注册配置示例

const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
registerMicroApps([
  {
    name: 'app-hash',
    entry: 'http://localhost:8080',
    container: '#container',
    activeRule: getActiveRule('#/app-hash'),
  },
]);

不同框架的适配

React Router和Angular Router需要设置路由的base
Vue Router需要创建空路由页面作为父路由：

const routes = [
  {
    path: '/app-vue-hash',
    name: 'Home',
    component: Home,
    children: [
      // 所有其他路由写在这里
    ],
  },
];

多微应用同时展示场景

当页面需要同时展示多个微应用且有路由跳转需求时：

使用loadMicroApp加载微应用
使用memory路由避免相互干扰：
- Vue Router使用abstract模式
- React Router使用memory history模式
- Angular Router不支持此模式

部署方案

方案一：主应用和微应用部署在同一服务器

关键配置

| 应用 | 路由base | publicPath | 实际访问路径 | |-----------------|------------------------|--------------------------|--------------------------------------| | vue-history | /child/vue-history/ | /child/vue-history/ | http://localhost:8080/child/vue-history/ |

框架具体配置

Vue微应用：

// vue.config.js
module.exports = {
  publicPath: '/child/vue-history/',
};

// 路由配置
base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/child/vue-history/',

React微应用：

// webpack配置
module.exports = {
  output: {
    publicPath: '/child/react-history/',
  },
};

// 路由配置
<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/app-react' : '/child/react-history/'}>

Angular微应用：

// 路由配置
providers: [
  {
    provide: APP_BASE_HREF,
    useValue: window.__POWERED_BY_QIANKUN__ ? '/app-angular/' : '/child/angular-history/',
  },
];

// package.json
"build": "ng build --deploy-url /child/angular-history/",

Nginx配置

server {
  listen       8080;
  server_name  localhost;

  location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location /child/vue-history {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /child/vue-history/index.html;
  }
}

方案二：主应用和微应用部署在不同服务器

通过Nginx代理实现跨域访问：

Nginx代理配置

/app1/ {
  proxy_pass http://www.b.com/app1/;
  proxy_set_header Host $host:$server_port;
}

微应用配置

// webpack配置
module.exports = {
  output: {
    publicPath: `/app1/`,
  },
};

// 主应用注册
registerMicroApps([
  {
    name: 'app1',
    entry: '/app1/', // http://localhost:8080/app1/
    container: '#container',
    activeRule: '/child-app1',
  },
]);

访问控制

如需限制微应用独立访问，可通过请求头判断：

if ($http_custom_referer != "main") {
  rewrite /index /404.html;
}

版本升级指南

从1.x升级到2.x版本主要变更：

registerMicroApps函数：
- 移除render参数，只需提供容器
- 新增loader参数显示加载状态
- activeRule参数可简写为/app
- RegisterMicroAppsOpts参数移至start函数
start函数：
- jsSandbox配置改为sandbox
- 新增getPublicPath和getTemplate