微前端乾坤

这篇具有很好参考价值的文章主要介绍了微前端乾坤。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 乾坤

简介
qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统
官网:https://qiankun.umijs.org/zh/guide

2.使用

背景:
vue2.0 , vue-cli 5.0

主应用:

安装乾坤

 $ yarn add qiankun # 或者 npm i qiankun -S

main.js设置注册子应用

 import { registerMicroApps, start } from 'qiankun';
 registerMicroApps([
    {
      name: 'sub-vue',
      entry: '//172.16.20.177:8081',
      container: '#container',
      activeRule: '/app-vue/',
      props:{id:1}
    },
  ]);
    start();

配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath:'/',
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}`,
      libraryTarget: 'umd'
    },
  },
})

app.vue中设置点击事件进行跳转
微前端乾坤

子应用:

vue2.0 , vue-cli5.0 ,webpack5.0
src下面设置一个public-path.js

if (window.__POWERED_BY_QIANKUN__) {
    // 这里不能擅自改为window不然微前端报错说找不到子应用入口
    /* global __webpack_public_path__:writable */ 
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }

vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/',
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  lintOnSave: false,
  configureWebpack: {
    output: {
      library: `vueApp`,
      libraryTarget: 'umd',
      globalObject: 'window'
    },
  },
})

main.js

import './public-path';
import Vue from 'vue'
import App from './App.vue'
import routes from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueRouter from 'vue-router';
Vue.config.productionTip = false
Vue.use(ElementUI);
let router = null;
let instance = null;

console.log(window.__POWERED_BY_QIANKUN__, 'window.__POWERED_BY_QIANKUN__')
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    // base: '/app-vue/',
    //.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
    mode: 'hash',
    routes,
  });
  instance = new Vue({
    router,
    // store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

router/index.js
由于main.js 中new router了所以这里将原来的new router 改为输出路由数组
微前端乾坤

由于pushstate里面设置了前缀,所以路由子应用这里不设置前缀也可以直接访问

  {
    path: '/',
    name: 'home',
    component: HomeView
  },

问题:用pushstate后回到主应用未带前缀的页面子应用的前缀也会跟着一起,除非刷新页面第一次

实践中需要总结的问题

1.沙箱:

sandbox - boolean | { strictStyleIsolation?: boolean, experimentalStyleIsolation?: boolean } - 可选,是否开启沙箱,默认为 true。 experimentalStyleIsolation是在子应用的样式前面加上特定的一个hash属性,类似于scope但是不能防止全局在主应用的样式影响。
微前端乾坤

{ strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点,从而确保微应用的样式不会对全局造成影响。但是这个属性有兼容性,有时候需要特殊处理(react)。
微前端乾坤

看了官网对沙箱的叙述,总的来说有这个功能,但是效果不是很好,后续还在优化。看了很多文章也说乾坤沙箱能不用就不用。。。。

2.主子应用通信问题

1.主应用传递参数给子应用
RegistrableApp里面props方法,可以在子应用微前端生命周期钩子中都可以获取到该参数name

registerMicroApps(
  [
    {
      name: 'app1',
      entry: '//localhost:8080',
      container: '#container',
      activeRule: '/react',
      props: {
        name: 'kuitos',
      },
    },
  ],
  {
    beforeLoad: (app) => console.log('before load', app.name),
    beforeMount: [(app) => console.log('before mount', app.name)],
  },
);

2.loadMicroApp 手动加载微应用方法
该方法也有props参数可以传递数据给子应用

3.initGlobalState(state) 定义全局状态
在主应用中使用,在子应用中通过props获取数据

使用主应用和子应用都使用hash模式的时候

注意事项:

主应用中:注册子应用的时候activeRule需要加上 # (history模式的时候activeRule: /app-vue,不用加#)
微前端乾坤

方法一:能正常访问子应用的其他配置
路由需要特意加上相对应的前缀
hash模式的时候router中的base不用设置,publicPath变量也使用默认值

方法二:使用hash模式 不加前缀
vue-router 的 hash 模式下不支持设置路由的 base,需要额外新建一个空的路由页面,将其他所有路由都作为它的 children:

{
    path: "/",
    component: NestedMenu,
    meta: { title: "子页面测试", noCache: true },
    children: [
      {
        path: "/testPage",
        component: () => import("../views/TestPage.vue"),
        meta: { title: "子页面测试", noCache: true },
        // name: 'test',
        hidden: true, // 不显示该路由到菜单上
      },
      {
        path: '/',
        name: 'home',
        component: HomeView
      },
      {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
      },
    ],
  }

全局变量
window.POWERED_BY_QIANKUN 判断是否是微前端主应用进入
微前端乾坤
每当离开子应用,点击主应用页面的时候,会调用this.$destroy()方法销毁子应用内容
微前端乾坤

项目实战中遇到的问题:

1.Failed to fetch 一般是链接不上name 为sub-vue子应用

微前端乾坤

2.application ‘sub-vue’ died in status LOADING_SOURCE_CODE: [qiankun]: You need to export lifecycle functions in sub-vue entry。 这里一般是vue.config.js 中的publicPath参数有问题 看是不是默认的‘/’ 或者子应用的访问路径通过主应用访问不到

微前端乾坤

3.接入其他项目 png等图片404问题

原因:有可能项目没有引入public-path.js

微前端乾坤
解决方法:https://qiankun.umijs.org/zh/faq#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%BE%AE%E5%BA%94%E7%94%A8%E5%8A%A0%E8%BD%BD%E7%9A%84%E8%B5%84%E6%BA%90%E4%BC%9A-404

vue.config.js 添加即可解决

  chainWebpack: (config) => {
    config.module.rule('fonts').use('url-loader').loader('url-loader').options({}).end();
    config.module.rule('images').use('url-loader').loader('url-loader').options({}).end();
  },

微前端乾坤

4.样式隔离

乾坤会将主应用公共引入的css和其他vue中的样式转化为style 在主应用中head里面直接引入,就很容易造成子应用也同时使用该样式后被覆盖
微前端乾坤

微前端乾坤
这是在子应用设置了这个class,但是原则上子应用应该没有这个样式,不应该样式生效,但是由于主应用的原因颜色变成了蓝色,违背了两个项目互不干扰的原则。
微前端乾坤

微前端乾坤
解决方法:
主应用设置严格的沙箱模式
微前端乾坤
效果:
微前端乾坤

5.js隔离

快照模式:将项目的window属性先缓存,再需要用到的时候获取最新的数据替换修改
缺点:window属性过多的时候,耗费内存

proxy单例 :使用了proxy有兼容性问题

proxy多例:使用了proxy有兼容性问题文章来源地址https://www.toymoban.com/news/detail-459444.html

到了这里,关于微前端乾坤的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于vue3+webpack5+qiankun实现微前端

    一 主应用改造(又称基座改造) 1 在主应用中安装qiankun(npm i qiankun -S)  2 在src下新建micro-app.js文件,用于存放所有子应用。  3 改造vue.config.js,允许跨域访问子应用页面  4 改造main.js   5 在App.vue中写响应跳转子应用(根据自己的项目找对应位置写,不局限于App.vue)   需要注

    2024年02月13日
    浏览(61)
  • 微前端乾坤

    简介 qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统 官网:https://qiankun.umijs.org/zh/guide 背景: vue2.0 , vue-cli 5.0 安装乾坤 main.js设置注册子应用 配置vue.config.js app.vue中设置点击事件进行跳转 vue2.0 , vue-cli5.0 ,web

    2024年02月06日
    浏览(61)
  • 微前端乾坤项目vue集成子系统流程

    在 src 目录新增 public-path.js: 入口文件 main.js 修改,为了避免根 id #app 与其他的 DOM 冲突,需要限制查找范围。 3.打包配置修改(vue.config.js): 4.路由配置: ###主系统的url路由配置: ###子系统的url路由配置:

    2024年02月01日
    浏览(44)
  • 微前端框架qiankun剖析

    要了解qiankun的实现机制,那我们不得不从其底层依赖的single-spa说起。随着微前端的发展,我们看到在这个领域之中出现了各式各样的工具包和框架来帮助我们方便快捷的实现自己的微前端应用。在发展早期,single-spa可以说是独树一帜,为我们提供了一种简便的微前端路由工

    2024年02月05日
    浏览(47)
  • 【微前端】qiankun

    专栏: 【微前端】什么是微前端 【微前端】qiankun 【微前端】qiankun + vite + vue3 qiankun 是一种前端微服务架构,旨在解决大型复杂应用的拆分和管理问题。 qiankun 的设计思路是基于“微服务”架构和“大前端”思想的,通过拆分前端应用、动态加载、状态共享、兼容性和稳定性

    2024年02月10日
    浏览(43)
  • 微前端----qiankun

    1.qiankun是什么?它解决了哪些问题? qiankun 是一个基于 single-spa 的微前端实现库,换句话说就是对single-spa进行了封装得到qiankun。 qiankun就是将一个大应用拆分成好多小项目,qiankun解决了我们协同开发的一些问题,其次更方便于我们进行更新代码 。 2.qiankun的实现原理及过程

    2024年02月12日
    浏览(36)
  • 微前端--qiankun原理概述

    demo放最后了。。。 一》微前端概述         微前端概念是从微服务概念扩展而来的,摒弃大型单体方式,将前端整体分解为小而简单的块,这些块可以独立开发、测试和部署,同时仍然聚合为一个产品出现在客户面前。可以理解微前端是一种将多个可独立交付的小型前端

    2023年04月14日
    浏览(33)
  • qiankun 微前端实例化使用

    一、qiankun使用场景 1. 简介:qiankun是在single-spa的基础上实现的,可以保证各个项目独立使用,也可以集成使用。各系统之间不受技术栈的限制,集成使用也能保证各样式和全局变量的隔离。 模块的插拔式使用,当公司项目集是一个大系统下包含多个子系统或者模块时,可以

    2024年02月04日
    浏览(60)
  • 微前端框架篇一,了解qiankun

    微前端是一种将复杂单体应用拆分为多个小型独立前端应用,然后将这些小应用按需加载并集成到主应用的技术方案。 每个子应用都有自己的 JavaScript 和 CSS 代码。 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。所有页面都来回在这张页面上切换。

    2024年01月22日
    浏览(44)
  • 微前端:qiankun的五种通信方式

    今天盘点一下 qiankun 父子应用的通信方式都有哪些,我发现了 5 种。 1、localStorage/sessionStorage 2、通过路由参数共享 3、官方提供的 props 4、官方提供的 actions 5、使用vuex或redux管理状态,通过shared分享 接下来我们一个一个进行说明 有人说这个方案必须主应用和子应用是同一个

    2024年03月21日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包