Qiankun微前端框架实战教程：路由模式选择与部署方案详解-CSDN博客

Qiankun微前端框架实战教程：路由模式选择与部署方案详解

前言

微前端架构在现代前端开发中扮演着越来越重要的角色，而qiankun作为一款优秀的微前端解决方案，提供了完整的微前端架构支持。本文将深入探讨qiankun框架中的两个核心主题：微应用路由模式的选择和不同场景下的部署方案。

一、微应用路由模式选择指南

在qiankun中，微应用的路由模式选择直接影响主应用与微应用之间的交互方式。我们需要根据实际场景选择最合适的路由模式。

1. 基于location.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应用，需要在package.json中修改构建命令：

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

Angular应用的额外处理

Angular应用在独立访问时，懒加载路由可能会出现路径错误，有两种解决方案：

方案一：修改public-path.js

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

方案二：修改构建命令并部署到特定目录

{
  "build": "ng build --base-href /angular9 --deploy-url /angular9/"
}

2. 基于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和Angular：需要将activeRule值设置为路由的base
Vue：需要创建额外的空路由页面，将所有其他路由作为其子路由

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

3. 多微应用共存时的路由处理

当页面需要同时显示多个微应用时，应使用loadMicroApp来加载它们。如果这些微应用有路由跳转需求，需要使用内存路由：

Vue-router：使用abstract模式
React-router：使用memory history模式
Angular-router：不支持内存路由

二、部署方案详解

场景一：主应用和微应用部署在同一服务器

推荐方案：微应用统一放在特定目录

假设目录结构如下：

html/
├── child/
│   ├── vue-hash/
│   ├── vue-history/
│   ├── react-hash/
│   ├── react-history/
│   ├── angular-hash/
│   ├── angular-history/
├── index.html
├── css/
├── js/

各微应用需要配置：

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

各框架具体配置

Vue-history微应用

路由配置：

base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/child/vue-history/',

Webpack配置（vue.config.js）：

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

React-history微应用

路由配置：

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

Webpack配置：

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

Angular-history微应用

路由配置：

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

构建命令修改：

{
  "build": "ng build --deploy-url /child/angular-history/"
}

Nginx配置

对于history路由，需要配置Nginx支持：

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 publicPath必须设置为/app1/
微应用必须部署在/app1目录下

module.exports = {
  output: {
    publicPath: `/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替代RegisterMicroAppsOpts