526互联

微前端-qiankun（乾坤）入门（只针对vue + vue）

发布时间 2023-09-13 12:24:14作者: 黑白棋学弟
微前端现在主要以qiankun为主，网上有很多微前端的教学，但是很多啰嗦甚至没有讲到要点，逻辑顺序也很跳跃，对于想入门的同学来说学习时间过长，结合种种情况，我整理网上qiankun 中 vue的教学，从一个入门新生，怎么一步一步创建一个项目过程开始讲解。
一、首先什么是微前端（了解）

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合

二、为什么使用微前端（了解）
  • 不同团队间开发同一个应用技术栈不同
  • 希望每个团队都可以独立开发，独立部署
  • 项目中还需要老的应用代码

我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib 。当路径切换 时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发问题。

三、qiankun框架（了解）

文档地址：https://qiankun.umijs.org/zh

2018 年 Single-SPA 诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决方案 ( 本身没有处理样式隔离， js 执行隔离 ) 实现了路由劫持和应用加载。

2019 年 qiankun 基于 Single-SPA, 提供了更加开箱即用的 API （ single-spa + sandbox + import-html-entry ） 做到了，技术栈无关、并且接入简单（像 i frame 一样简单）。

四、qiankun框架实例

1、创建两个应用
1）创建基座
vue create vue_zhu

2）创建子应用

 vue create vue_zi

基座：vue_zhu 子应用：vue_zi （就是创建2个基本项目，创建时配置内容按照自己的习惯来）

2、项目配置（主要内容  可以直接 Ctrl + c 来，Ctrl + v）

1）基座vue_zhu配置（以下都是在主基座配置内容）
①（第一步当然是 引入qiankun插件啦）

yarn add qiankun 或者 npm i qiankun -S

②然后直接打开    main.js   进行配置

注意：

↓↓↓↓↓看这里我都标红了↓↓↓↓

entry这项配置是我们子项目的域名和端口，我们必须确保子项目运行在端口上面，（我这里设置的是 8081，到时候子应用的端口我就设置成8081 ）
container就是我们的容器名，就是我们子应用挂载的节点，相当于Vue项目里面的app节点，（这个#vue在主应用  App.vue有显示，请留意）
activeRule就是我们的激活路径，根据路径来显示不同的子应用。
↑↑↑↑↑看这里我都标红了↑↑↑↑
import { registerMicroApps, start } from 'qiankun';
const apps = [
 {
  name: 'vueApp', // 应用的名字
  entry: '//localhost:8081', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
  container: '#vue', // 容器名（此项目页面中定义的容器id，用于把对应的子应用放到此容器中）
  activeRule: '/vue', // 激活的路径
  props: { a: 1 } // 传递的值（可选）
 }
]
registerMicroApps(apps); // 注册应用
start({
  prefetch: false // 取消预加载
});// 开启

我在这里插个话题，我安装了 element UI  纯粹是为了好看  引入 element UI

npm i element-ui -S

在main.js中引入element-ui：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

③好了  进入正规  现在要 修改app.vue的组件代码

<template>
   <div>
    <el-menu :router="true" mode="horizontal" :default-active="activeIndex" > 
    <!--基座中可以放自己的路由-->
    <el-menu-item index="/">Home</el-menu-item>
     <!--引用其他子应用-->
     <el-menu-item index="/vue">vue应用</el-menu-item>
    </el-menu>
   <router-view></router-view>
   <div id="vue"></div>
  </div>
</template>
<script>
export default {
  props: {},
  data () {
    return {
      activeIndex:'/'
    }
  },
}
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
</style>

这里主要注意两处内容    id="vue"  和  index="/vue"  这两处 和main.js 中的   container: '#vue' 和  activeRule: '/vue'   对应    
还有一点  一定要留意 就是我现在设置的是  App.vue   id=‘app’  我并没有写  

 很多时候都会写这里，主要是因为qiankun中会有css  id重复 会报错 报错内容

application 'vueApp' died in status NOT_MOUNTED: [qiankun]: Target container with #vue not existed after vueApp mounted!

为了避免这种错误  咱们只需要 主应用和微应用 css设置时候 留意这一块就行  （这里只针对入门新手弄的内容，最简单的办法 避免新坑罢了）

④这里对 router.js代码 进行配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
 
]

const router = new VueRouter({
  mode: 'history',
  // base: process.env.BASE_URL,
  base:'',
  routes
})

export default router

我把创建项目的   about文件进行了删除   影响我的发挥  也可以 留着

文中  主要对  base  进行了设置

2）子应用vue_zi配置  （以下都是在子基座配置内容）

① 首先对 main.js配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'

let instance = null
function render(props) {
 instance = new Vue({
   router,
   render: h => h(App)
  }).$mount('#app'); // 这里是挂载到自己的html中  基座会拿到这个挂载后的html 将其插入进去
}

if (window.__POWERED_BY_QIANKUN__) { // 动态添加publicPath
   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行
  render();
}

// 父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmount
 // 子组件的协议就ok了
export async function bootstrap(props) {

};

export async function mount(props) {
     render(props)
}

// 卸载
export async function unmount(props) {
  instance.$destroy();
}

② 然后对 router.js 进行配置（这里我也删除了  about.vue  ）

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
]

const router = new VueRouter({
  mode: 'history',
  base: '/vue',
  routes
})

export default router

重点来了啊   base: '/vue', 这里是重点 他和主基座的 

 activeRule: '/vue', // 激活的路径

正好呼应上  神不神奇  

③这里就是 新加一个  vue.config.js  有前端基础的应该都知道在哪里 但是我默认我是小白  下面是截图

 直接创建就行 里面内容如下

module.exports = {
    lintOnSave: false,  // 关闭eslint检测
    devServer: {
        port: 8081,//这里的端口是必须和父应用配置的子应用端口一致
        headers: {
            //因为qiankun内部请求都是fetch来请求资源，所以子应用必须允许跨域
            'Access-Control-Allow-Origin': '*'
        }
    },
    configureWebpack: {
        output: {
            //资源打包路径
            library: 'vueApp',
            libraryTarget: 'umd'
          }
       }
    }

主基座中  对子基座的  路径进行了配置  

entry: '//localhost:8081', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch

所以我们在config.vue.js中设置  port  为8081
最后就是见证奇迹的时刻  两个项目跑起来  就行了 这就是一个简单的入门，里面学问还有好多   可以自行寻找 体会