首页 > 建站教程 > 前端框架 >  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


TAGS: qiankun js  微前端服务