首页 > 建站教程 > 前端框架 >  qiankun.js 微前端服务正文

qiankun.js 微前端服务

一、简介qiankun应用


微前端,之前一直都有简单了解过微服务,大概就是N个类型的服务都注册到主要服务上,然后就各自管理即可。而后期又发展了微服务,前端的微服务简单来说就是,【子应用】(N个站,或者应用,或者模块)都注册到一个【父应用】上,然后各自管理,开发即可,每个子用应又可以是独立的,也不用管子应用到底是用什么开发,总之最后对接注册到父应用上即可。


举个例子:


系统1(jquery+js),系统2(vue.js),系统3(react.js), 现在需要将三个系统整合成一个系统。如何做呢?如下图


1 主应用(父应用,即入口)窗口



2 子应用-vue.js 窗口



3 子应用-react 窗口(注意react仅代表第二个应用,请勿略实际内容)



说明:


a.上面三图是我搭建的qiankun(以下称为QK),第一张为主图,第二张为子应用1,第三张为子应用2,三个应用通过上方菜单切换(实际中,你的父应用可以是所有菜单,或者按模块加载等)


b.每个应用也可以独立打开,注意红色区域,如下图,这么做的目的是每个子应用开发人员可以针对自己的项目进行开发,实际中你可以将公共的信息区分一下即可,比如用户显示等信息,合在一起时再通过父去显示即可



二、搭建


1 准备工具:三个空白项目,并默认安装ELEMENT-UI(可选)



2 父应用配置


父应用中安装qiankun包:

npm i qiankun -S

配置父应用的main.js文件,如下

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)
Vue.config.productionTip = false
 
import { registerMicroApps, start } from 'qiankun'
 
//子应用注册信息
const apps = [
  {
    name: 'vueApp',
    entry: '//localhost:10000',
    container: '#vue',
    activeRule: '/vue',
    props: { a: 1 }, //父应用传值
  },
  {
    name: 'reactApp',
    entry: '//localhost:10100',
    container: '#react',
    activeRule: '/react',
  },
]
 
registerMicroApps(apps)
start({
  prefetch: false, //取消预加载
})
 
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app')


3 配置【子应用01】

子应用不需要安装qiankun.js


配置main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
Vue.config.productionTip = false
 
let instance = null
 
function render(props) {
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount('#app') //默认挂载自己的HTML,基座
}
 
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
 
if (!window.__POWERED_BY_QIANKUN__) {
  // 如果是独立运行此项目,则直接运行
  render()
}
export async function bootstrap(props) {}
 
export async function mount(props) {
  console.log(props)
  render(props)
}
 
export async function unmount(props) {
  instance.$destroy()
}
修改vue.config.js
module.exports = {
  devServer: {
    port: 10000,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: 'vueApp',
      libraryTarget: 'umd',
    },
  },
}


修改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,
  },
  {
    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/About.vue'),
  },
]
 
const router = new VueRouter({
  mode: 'history',
  base: '/vue', //修改路由访问规则
  routes,
})
 
export default router

注意,base中的根路由,要与父应用中的路由保持一致,如若不一致,就会出现路由访问不正确,从而无法显示你的页面


***********子应用路由配置***********
const router = new VueRouter({
  mode: 'history',
  base: '/vue', //修改路由访问规则
  routes,
})
***********父应用注册信息***********
const apps = [
  {
    name: 'vueApp',
    entry: '//localhost:10000',
    container: '#vue',
    activeRule: '/vue',
    props: { a: 1 }, //父应用传值
  }...
]


到此,配置结束,第二个子应用与上面配置方法一样,


注意:


路由信息配置:【base: '/vue'】【activeRule: '/vue',】两项的配置即可。

vue.config.js配置:

configureWebpack: {
    output: {
      library: 'reactApp',
      libraryTarget: 'umd',
    },
},


最后一部,将三个应用全部启动,打开父应用的地址,即可出现开头的内容,本地化配置结束。



主应用访问子应用示例:

http://localhost:8080/vue/Home


版权声明:本文为CSDN博主「小三金」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/tdjqqq/article/details/122088823