vue项目微前端试水

微前端概念

抽离系统模块，独立开发，独立部署，独立运行、可以集成，可以解耦。（将前端应用分解成更小、更简单，但用户看来仍是内聚的产品）

• 微前端概念示意图

微前端主模块

业务线A

子模块1

子模块2

页面1

页面2

业务线B

业务线C

• 微前端实现逻辑

加载器注册各个子项目

是

否

是

否

用户打开界面

主项目main.js

加载器

匹配到路由?

首次挂载

不渲染子项目

子项目main.js

组件mount

主应用(安装qiankun)

1.存放注册的微应用

• 当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的container 中，同时依次调用微应用暴露出的生命周期钩子。

//1.src/micros/apps.js 
const apps = [
  /**
   * name: 微应用名称 - 具有唯一性
   * entry: 微应用入口 - 通过该地址加载微应用
   * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
   * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
   */
  {
    name: "VueMicroApp",
    entry: "//localhost:10200",
    container: "#iframe",
    activeRule: "/#/vue"
  }
];
export default apps;

2.注册微应用

一般主应用、子应用的路由模式保持一致

//2.src/micros/index.js
import { registerMicroApps, start } from "qiankun";
import apps from "./apps";
/**
 * @description: 注册微应用
 * 第一个参数 - 微应用的注册信息
 * 第二个参数 - 全局生命周期钩子
 */
registerMicroApps(apps);

/**
 * @description: 导出启动函数
 */
export default start;

3.启动微应用

//3.src/main.js 
import startQiankun from "./micros";
startQiankun();

微应用(无需安装依赖)

1.修改运行时的public-path 主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。

//在 src 目录新增 public-path.js：

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

2.导出主应用需要的三个声明周期函数

//src/main.js
import "./public-path"
import Vue from "vue";
import VueRouter from "vue-router";
import router from "./router";
Vue.use(VueRouter);
let instance = null;

/**
 * 渲染函数
 * 两种情况 主应用中启动/微应用单独启动
 */
function render() {
  //挂载应用
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount("#app");
}

// 独立运行时，直接挂载应用
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log("VueMicroApp bootstraped");
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  console.log("VueMicroApp mount", props);
  render(props);
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  console.log("VueMicroApp unmount");
  instance.$destroy();
  instance = null;
}

3.配置

注意：需配置disabledHostCheck和允许跨域 否则报错

//vue.config.js
const path = require('path');
const packageName = require('./package.json').name;
module.exports = {
  devServer: {
    // 监听端口
    port: 10200,
    // 关闭主机检查，使微应用可以被 fetch，否则会提示生命周期未注册
    disableHostCheck: true,
    // 配置跨域请求头，解决开发环境的跨域问题
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      // 微应用的包名，这里与主应用中注册的微应用名称一致
      library: `${packageName}-[name]`,
      // 将你的 library 暴露为所有的模块定义下都可运行的方式
      libraryTarget: 'umd',
      // 按需加载相关，设置为 webpackJsonp_VueMicroApp 即可
       jsonpFunction: `webpackJsonp_${packageName}`,
    }
  }
}

4.子应用路由需添加前缀

// 判断是 qiankun 环境则增加路由前缀
if (window.__POWERED_BY_QIANKUN__) {
  prefix = "/vue";
}
//前缀跟主应用规则匹配时保持一致
routes: [
    {
      path: prefix + "/",
      name: "home",
      redirect: prefix + "/toolbox"
    }]

为什么不使用iframe？

1. iframe的隔离性导致应用间上下文无法共享
2. 慢。每次子应用进入都是一次资源重新加载、浏览器的渲染
3. 浏览器前进后退
4. ……

问题

1. application ‘tangram’ died in status LOADING_SOURCE_CODE: [qiankun] You need to export lifecycle functions in tangram entry

• 检查生命周期钩子是否配置
• webpack相关配置
• 微应用的名字

2. Application died in status NOT_MOUNTED: Target container with #container not existed while xxx loading!

• start函数调用时机不对
• 检查容器dom是否存在主应用的某个子路由下。

3. 主应用的某个路由页面加载微应用

通过*方式才可以使微应用里的子路由被识别到

1. 主应用注册这个路由时给 path 加一个 *，注意：如果这个路由有其他子路由，需要另外注册一个路由，任然使用这个组件即可。
const routes = [
  {
    path: '/portal/*',
    name: 'portal',
    component: () => import('../views/Portal.vue'),
  }
]
2. Portal.vue
import { start } from 'qiankun';
export default {
  mounted() {
    if (!window.qiankunStarted) {
      window.qiankunStarted = true;
      start();
    }
  },
}

4. 子应用404

• 可能是public-path配置问题