欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue项目微前端试水

程序员文章站 2022-06-27 22:55:50
文章目录微前端概念主应用(安装qiankun)1.存放注册的微应用2.注册微应用3.启动微应用微应用(无需安装依赖)1.修改运行时的public-path 主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。2.导出主应用需要的三个声明周期函数3.配置4.子应用路由需添加前缀为什么不使用iframe?问题1. application 'tangram' died in status LOADING_SOURCE_CODE: [qiankun] You need to export life...

微前端概念

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

  • 微前端概念示意图
  • 微前端实现逻辑

主应用(安装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配置问题

本文地址:https://blog.csdn.net/cyyy1223/article/details/111995277