初学者搭建qiankun微前端

qiankun微前端

介绍

• qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

特性

• 📦 基于 single-spa 封装，提供了更加开箱即用的 API。
• 📱 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
• 💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。single-spa是根据JavaScript Entry接入方式
• 🛡 样式隔离，确保微应用之间样式互相不干扰。
• 🧳 JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
• ⚡️ 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
• 🔌 umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

简单搭建qiankun-vue2

效果查看

子应用页面

主应用搭建

#1.安装qiankun
	npm i qiankun -S

#2.项目导入
main.js
	import { registerMicroApps, start } from 'qiankun';
    registerMicroApps([//注册
      {
        name: 'qiankunchild',
        entry: '//192.168.4.193:7001/qiankunchild/', // 运行微应用的地址
        container: '#qiankunVue', // 展示的DOM容器 id
        activeRule: "/", // 跳转路径
      }
    ]);
    // 启动 qiankun
    start({prefetch:false});

#3.微服务存放DOM位置
App.vue
  <div id="app">
      <nav>
          <router-link to="/">Home</router-link> |
          <router-link to="/about">About</router-link>|
      </nav>
	<keep-alive>
      <router-view />
    </keep-alive>
    我是qiankun微前端子应用内容
    <div id="qiankunVue"></div> /*注释：这里的qiankunVue对应main.js中registerMicroApps的container*/
 </div>

#4.修改router路由模式
router/index.js
    const router = new VueRouter({
      routes,
      mode:'history',//主应用路由跳转模式改成history,这里为什么要用history模式等下见图解
    })

主应用搭建问题

• 为什么registerMicroAppsz注册的entry运行地址为//192.168.4.193:7001/qiankunchild/和 activeRule跳转路径设置为” / ”，而不是entry 设置成//192.168.4.193:7001和 activeRule设置成/qiankunchild

  ​ 配置如下：

  

  连接报错：没有找到子应用的路由页面

  

  配置如下：

  

  连接成功：

  ​

• 为什么要把主应用的router路由模式改成history

  1.主应用router设置为hash模式后,子应用mode设置模式为history后

  

  查看点击的路径：

  

2.主应用router设置为hash模式后,子应用mode设置模式也设置为hash后

​ 查看点击的路径：

#出现问题：点击主，子应用路由相互影响

子应用搭建

#1 main.js配置
    import Vue from 'vue'
    import App from './App.vue'
    import VueRouter from 'vue-router';
    import routes from './router'
    import store from './store'

    Vue.config.productionTip = false
	
    if (window.__POWERED_BY_QIANKUN__) {
      __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
    }
    let router = null;
    let instance = null;
    function render(props = {}) {
      const { container } = props;
      router = new VueRouter({
        base: window.__POWERED_BY_QIANKUN__ ? '/qiankunchild' : '/qiankunchild',
        mode: 'history',
        routes: routes.options.routes,//routes.options.routes获取router中所有配置的路由
      });

      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;
    }
#2. vue.config.js配置
const { name } = require('./package');
    module.exports = {
      publicPath:"/qiankunchild",//配置打包后生成的网页路径   eg:http://192.168.4.193:7001/qiankunchild/
      devServer: {
        port: 7001, // 启动项目时的端口号
        headers: {
          'Access-Control-Allow-Origin': '*',
        },
      },
      configureWebpack: {
        output: {
          library: `${name}-[name]`,
          libraryTarget: 'umd', // 把微应用打包成 umd 库格式
          chunkLoadingGlobal: `webpackJsonp_${name}`,
        },
      },
    };

子应用搭建问题

• 子应用配置base:window.POWERED_BY_QIANKUN ? '/qiankunchild' : '/qiankunchild' ,base基础路径为什么跟主应用的activeRule设置不一样

  正常配置：

  

  官网上配置的子应用`base`跟主应用的`activeRule`配置为同一个路径
  	子应用的base是根据自身项目地址来跳转路由页面，子应用在vue.config.js配置了publicPath:'/qiankunchild',所以子应用项目运行后项目地址带有`/qiankunchild`,如果base设置为"/",子应用路由跳转会根据主应用下"/",主子应用路由跳转会相互影响