入门教程

微应用的路由模式如何选择

react-router，angular-router，vue-router 这三种路由，都支持 hash 和 history 模式，微应用使用不同的模式在 qiankun 中略有差别。

activeRule 使用 location.pathname 区分微应用

主应用使用 location.pathname 来区分微应用时，微应用可以是 hash 和 history 模式。

注册微应用时 activeRule 这样写即可：

  1. registerMicroApps([
  3.   {
  5.     name: 'app',
  7.     entry: 'http://localhost:8080',
  9.     container: '#container',
  11.     activeRule: '/app',
  13.   },
  15. ]);

  1. 当微应用是 history 模式时，设置路由 base 即可

  2. 当微应用是 hash 模式时，三种路由的表现不一致

    路由主应用跳转/app/#/about特殊配置
    vue-router响应 about 路由无
    react-router不响应 about 路由无
    angular-router响应 about 路由需要设置 —base-href

    angular 应用在 package.json 里面设置 --base-href：

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

    打包部署后，angular 微应用可以被主应用访问。但是独立访问时，懒加载的路由会报错，路径不正确。这里有两个解决办法：

    • 方法 1：修改 public-path.js 为：

      1. __webpack_public_path__ = window.__POWERED_BY_QIANKUN__
      1.   ? window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
      1.   : `http://${ip}:${port}/`; // 填写你的实际部署地址

    • 方法 2：修改打包命令，并且将微应用部署在 angular9 目录：

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

activeRule 使用 location.hash 区分微应用

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

注册微应用时 activeRule 需要这样写：

  1. const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
  3. registerMicroApps([
  5.   {
  7.     name: 'app-hash',
  9.     entry: 'http://localhost:8080',
  11.     container: '#container',
  13.     activeRule: getActiveRule('#/app-hash'),
  15.     // 这里也可以直接写 activeRule: '#/app-hash'，但是如果主应用是 history 模式或者主应用部署在非根目录，这样写不会生效。
  17.   },
  19. ]);

react-router 和 angular-router 微应用需要设置 activeRule 的值为路由的 base ，写法同 history 模式。

vue-router 的 hash 模式下不支持设置路由的 base，需要额外新建一个空的路由页面，将其他所有路由都作为它的 children：

  1. const routes = [
  3.   {
  5.     path: '/app-vue-hash',
  7.     name: 'Home',
  9.     component: Home,
  11.     children: [
  13.       // 其他的路由都写到这里
  15.     ],
  17.   },
  19. ];

同时存在多个微应用时

如果一个页面同时展示多个微应用，需要使用 loadMicroApp 来加载。

如果这些微应用都有路由跳转的需求，要保证这些路由能互不干扰，需要使用 momery 路由。vue-router 使用 abstract 模式，react-router 使用 memory history 模式，angular-router 不支持。

如何部署

建议：主应用和微应用都是独立开发和部署，即它们都属于不同的仓库和服务。

场景 1：主应用和微应用部署到同一个服务器（同一个 IP 和端口）

如果服务器数量有限，或不能跨域等原因需要把主应用和微应用部署到一起。

通常的做法是主应用部署在一级目录，微应用部署在二/三级目录。

微应用想部署在非根目录，在微应用打包之前需要做两件事：

  1. 必须配置 webpack 构建时的 publicPath 为目录名称，更多信息请看 webpack 官方说明入门教程 - 图1 和 vue-cli3 的官方说明入门教程 - 图2

  2. history 路由的微应用需要设置 base ，值为目录名称，用于独立访问时使用。

部署之后注意三点：

  1. activeRule 不能和微应用的真实访问路径一样，否则在主应用页面刷新会直接变成微应用页面。
  2. 微应用的真实访问路径就是微应用的 entry，entry 可以为相对路径。
  3. 微应用的 entry 路径最后面的 / 不可省略，否则 publicPath 会设置错误，例如子项的访问路径是 http://localhost:8080/app1,那么 entry 就是 http://localhost:8080/app1/。

具体的部署有以下两种方式，选择其一即可。

方案 1：微应用都放在在一个特殊名称（不会和微应用重名）的文件夹下（建议使用）

假设我们有一个主应用和 6 个微应用（分别为 vue-hash、vue-history、react-hash、react-history、angular-hash、angular-history ），打包后如下放置：

  1. └── html/                     # 根文件夹
  3.     |
  5.     ├── child/                # 存放所有微应用的文件夹
  7.     |   ├── vue-hash/         # 存放微应用 vue-hash 的文件夹
  9.     |   ├── vue-history/      # 存放微应用 vue-history 的文件夹
  11.     |   ├── react-hash/       # 存放微应用 react-hash 的文件夹
  13.     |   ├── react-history/    # 存放微应用 react-history 的文件夹
  15.     |   ├── angular-hash/     # 存放微应用 angular-hash 的文件夹
  17.     |   ├── angular-history/  # 存放微应用 angular-history 的文件夹
  19.     ├── index.html            # 主应用的index.html
  21.     ├── css/                  # 主应用的css文件夹
  23.     ├── js/                   # 主应用的js文件夹

此时需要设置微应用构建时的 publicPath 和 history 模式的路由 base，然后才能打包放到对应的目录里。

项目路由 basepublicPath真实访问路径
vue-hash无/child/vue-hash/http://localhost:8080/child/vue-hash/入门教程 - 图3
vue-history/child/vue-history//child/vue-history/http://localhost:8080/child/vue-history/入门教程 - 图4
react-hash无/child/react-hash/http://localhost:8080/child/react-hash/入门教程 - 图5
react-history/child/react-history//child/react-history/http://localhost:8080/child/react-history/入门教程 - 图6
angular-hash无/child/angular-hash/http://localhost:8080/child/angular-hash/入门教程 - 图7
angular-history/child/angular-history//child/angular-history/http://localhost:8080/child/angular-history/入门教程 - 图8

  • vue-history 微应用

    路由设置：

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

    webpack 打包 publicPath 配置（vue.config.js）：

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

  • react-history 微应用

    路由设置：

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

    webpack 打包 publicPath 配置：

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

  • angular-history 微应用

    路由设置：

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

    webpack 打包的 publicPath 通过 deploy-url 来修改，修改 package.json：

    1. - "build": "ng build",
    1. + "build": "ng build --deploy-url /child/angular-history/",

那么此时的注册函数是这样的（需要保证 activeRule 和 entry 不同）：

  1. registerMicroApps([
  3.   {
  5.     name: 'app-vue-hash',
  7.     entry: '/child/vue-hash/', // http://localhost:8080/child/vue-hash/
  9.     container: '#container',
  11.     activeRule: '/app-vue-hash',
  13.   },
  15.   {
  17.     name: 'app-vue-history',
  19.     entry: '/child/vue-history/', // http://localhost:8080/child/vue-history/
  21.     container: '#container',
  23.     activeRule: '/app-vue-history',
  25.   },
  27.   // angular 和 react 同上
  29. ],

至此主应用已经和微应用都能跑起来了，但是主应用和 vue-history、react-history、angular-history 微应用是 history 路由，需要解决刷新 404 的问题，nginx 还需要配置一下：

  1. server {
  3.   listen       8080;
  5.   server_name  localhost;
  7.   location / {
  9.     root   html;
  11.     index  index.html index.htm;
  13.     try_files $uri $uri/ /index.html;
  15.   }
  17.   location /child/vue-history {
  19.     root   html;
  21.     index  index.html index.htm;
  23.     try_files $uri $uri/ /child/vue-history/index.html;
  25.   }
  27.   # angular 和 react 的history 配置同上
  29. }

方案 2：微应用直接放在二级目录，但是设置特殊的 activeRule

  1. └── html/                     # 根文件夹
  3.     |
  5.     ├── vue-hash/             # 存放微应用 vue-hash 的文件夹
  7.     ├── vue-history/          # 存放微应用 vue-history 的文件夹
  9.     ├── react-hash/           # 存放微应用 react-hash 的文件夹
  11.     ├── react-history/        # 存放微应用 react-history 的文件夹
  13.     ├── angular-hash/         # 存放微应用 angular-hash 的文件夹
  15.     ├── angular-history/      # 存放微应用 angular-history 的文件夹
  17.     ├── index.html            # 主应用的index.html
  19.     ├── css/                  # 主应用的css文件夹
  21.     ├── js/                   # 主应用的js文件夹

基本操作和上面是一样的，只要保证 activeRule 和微应用的存放路径名不一样即可。

场景 2：主应用和微应用部署在不同的服务器，使用 Nginx 代理访问

一般这么做是因为不允许主应用跨域访问微应用，做法就是将主应用服务器上一个特殊路径的请求全部转发到微应用的服务器上，即通过代理实现“微应用部署在主应用服务器上”的效果。

例如，主应用在 A 服务器，微应用在 B 服务器，使用路径 /app1 来区分微应用，即 A 服务器上所有 /app1 开头的请求都转发到 B 服务器上。

此时主应用的 Nginx 代理配置为：

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

主应用注册微应用时，entry 可以为相对路径，activeRule 不可以和 entry 一样（否则主应用页面刷新就变成微应用）：

  1. registerMicroApps([
  3.   {
  5.     name: 'app1',
  7.     entry: '/app1/', // http://localhost:8080/app1/
  9.     container: '#container',
  11.     activeRule: '/child-app1',
  13.   },
  15. ],

对于 webpack 构建的微应用，微应用的 webpack 打包的 publicPath 需要配置成 /app1/，否则微应用的 index.html 能正确请求，但是微应用 index.html 里面的 js/css 路径不会带上 /app1/。

  1. module.exports = {
  3.   output: {
  5.     publicPath: `/app1/`,
  7.   },
  9. };

微应用打包的 publicPath 加上 /app1/ 之后，必须部署在 /app1 目录，否则无法独立访问。

另外，如果不想微应用通过代理路径被独立访问，可以根据请求的一些信息判断下，主应用中请求微应用是用 fetch 请求的，可以带参数和 cookie。例如通过请求头参数判断：

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

从 1.x 版本升级到 2.x 版本

微应用无需改动，主应用需要做一些调整。

registerMicroApps 函数基本修改如下：

  1. 去掉 render 参数，只需要提供容器 container 即可。
  2. 增加 loader 参数，用于展示 loading 状态，原本 loading 状态是提供给 render 参数的。
  3. activeRule 参数可以简写为 /app，兼容之前的函数写法。
  4. RegisterMicroAppsOpts 参数去掉了，放在了 start 函数的参数里面。

start 函数基本修改如下：

  1. jsSandbox 配置去掉，改为 sandbox ，可选值也修改了。
  2. 新增了 getPublicPath 和 getTemplate ，用于替代RegisterMicroAppsOpts。