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配置问题
相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页